fabrik.css peeve

Bauer

Well-Known Member
This css styling declaration was introduced at line 40 of ./media/com_fabrik/css/fabrik.css a few months back - and I have to change it every time I update from github.

It doesn't seems right that you would add this '!important' css styling if it only affects certain templates. I say let whoever uses those special templates worry about adding the special '!important' styling needed to conform! :mad:

CSS:
/** bootstrap 3 (possibly just t3 framework templates) remove the label if it has a tip on it
when you move the mouse out of the label */
label.fabrikLabel.fabrikTip, span.fabrikTip {
    display:inline!important
}

Or, if you really must include styling for t3 framework compatibility - could you at least make it "display:inline-block!important;" instead? If that will work for fixing the t3 templates, it won't break any elements that specify a width for the span holding the element label. i.e. Where you WANT the label to wrap to a specified width - NOT be forced 'inline'.

As an example of what this css declaration does "for all the rest of us", I have attached 2 screen snips of an element (really a combination of elements, thanks to jQuery) where the css for the label width was intentionally set to "width: 180px!important;" - yet that line in the fabrik.css file causes it to not wrap the label at that specified width.

My vote is to just remove that declaration from fabrik.css entirely. (In that case, labels with a fixed width narrower than the parent div would wrap to that width as expected - which would also look like the 2nd attachment (fabrikTip_inline-block.png).
 

Attachments

  • fabrikTip_inline.png
    fabrikTip_inline.png
    80.4 KB · Views: 107
  • fabrikTip_inline-block.png
    fabrikTip_inline-block.png
    79.1 KB · Views: 112
Last edited:
Unfortunately t3 templates are popular enough that we have to account for them. If you want to figure the CSS that will work with t3 and not mess up what you are trying to do, I'll apply the change.

-- hugh
 
Nevermind. I wrote some other css to work around this. If any fabrik members are confused as to why the css styling they have assigned to an element label isn't working as expected, even with the !important tag appended to it - you now know why.
 
We are in need of some funding.
More details.

Thank you.

Members online

No members online now.
Back
Top