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!
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).
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!
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
Last edited: