Space At The Front Of Labels

[lazysheepmedia]

Folks

I'm positive this may have been answered before but I can quite find the rright search term to find the answer

If you look at the screen shot you will see the space at the front of the label - How can I adjust this or lose it completely, both by individual element or globally?

Thanks as always

 

[troester]

Fabrik 3.1rc1 :

Really?


In protostar .control-label is right-aligned, which Joomla/Fabrik template are you using?
And Fabrik seems to be adding an icon before any label (even if it is no existing one: <i class="icon- small "></i>) and protostar is setting
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
height: 14px;
line-height: 14px;
width: 14px;
}
So add some custom CSS to "reset".

 

[lazysheepmedia]

Really?

In protostar .control-label is right-aligned, which Joomla/Fabrik template are you using?
And Fabrik seems to be adding an icon before any label (even if it is no existing one: <i class="icon- small "></i>) and protostar is setting
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
height: 14px;
line-height: 14px;
width: 14px;
}
So add some custom CSS to "reset".

Really?

No sorry I haven't updated my signature

Done now!

I have found the problem it is in the template as you say - I am using yoo_nano3 dove style

The page I should have pointed you to is this one

Thanks for your time once again

 

[troester]

Is yoo_nano3 playing nicely with Fabrik (e.g. date picker, icons, JS)? (I'm always looking for templates without Fabrik-issues).

 

[lazysheepmedia]

Hi Troester, apart from this spacing issues it really is an excellent template - It fits in perfectly, as far as I can tell, with fabrik and nothing so far is broken

If you want to have a play, I can send you some login details for a demo account which gives you access to all the forms i have done

 

[bea]

Hi Troester,
I ran into the same issue and can't figure out to reset the 'icon-small' with custom CSS. Even I don't understand, why we need this space...
I always appreciate your help

Cheers,
Bianka

 

[cheesegrits]

The problem is either in the labelIcons() method in the elementvalidation.php model, around line 237, or in the image() helper:

$emptyIcon = $this->getIcon();
$icon = FabrikHelperHTML::image($emptyIcon, 'form', $tmpl, $this->iconOpts) . ' ';

... where $emptyIcon is an empty string if the element has no validations ... then in the image() helper, that results in that malformed "class=icon-" with no icon name. I'm not entirely sure if the proper fix is to not call image() if there are no validations in the labelIcons(), or if image() should return just an empty string if that first argument is empty, or if it should return some kind of default "nothing" image, which is just transparent blank.
Anyway, for now I'm going to fix it in the validation model, but not calling image() if there are no validations.
-- hugh

 

[cheesegrits]

OK, I applied a quick fix in this commit:

https://github.com/Fabrik/fabrik/commit/0e8a98abfaa38664200964650c144b068bd2d088

... which just leaves out the icon markup if there is no validation icon. I'm not entirely sure if that's the right things to do, or if we should be rendering some kind of invisible icon as a placeholder, to keep the DOM structure consistent.

But for now ... this commit should just stop us from putting in that malformed Bootstrap icon markup if there are no icons to show.

-- hugh

 

[lazysheepmedia]

Thanks Hugh thats sorted it for me

And welcome back, great to see you are making a good recovery