Bootstrap 3 Tabs and Form label problems.

8 years 6 months ago - 8 years 5 months ago #1 by chrisc
Whilst working upon developing a new component we had it is a situation where it was working perfectly with the default 'protostar' template. Our site however is using a Bootstrap 3 base template, not bootstrap 2 based as is 'Protostar'. [Joomla provide a modified version of the base Bootstrap 2 code/CSS so we can not be 100% sure that whether it is in the Bootstrap base release or not.]

So we looked at it on our Bootstrap 3 template and immediately we saw a few problems. Tried a few other Bootstrap 3 templates as well, and soon decided that this was not caused by our coding but more likely to be as a result of Bootstrap 3 itself. We tested both Bootstrap versions 3.3.4 and 3.3.5.

Looking further we discovered that it was not only restricted to our component work but also exhibited by the core com_content component as illustrated by the front end form for creating/editing articles.

The first problem involved was where 'Tabs' were being used to display content. The content was displayed fine, apart from when one changed tabs, when the previously viewed tab 'disappeared'. Looking at the generated code we could immediately see the problem, which was that the tab address link had an additional style="display:none" added, hence making it invisible to the viewer. This was not the behaviour seen with the Bootstrap 2 as used by Joomla Protostar template so we had to come up with a CSS work around as follows:
.nav > li > a { display: block !important; }

The second problem concerned the form display in that when one hovered over a form field label, the label promptly disappeared as well. Investigation reveals that this is a similar problem to the above in that an additional style="display:none" has been added to the label rendering it invisible.
label { display: inline-block !important }

We do not generally like using the '!important' flag but in this circumstance it was required to override the style statement. Since this problem impacted a few components we have added it to out template CSS override.

This may need to be reviewed or refined to more accurately target the problem, but currently it does the job just fine.

Regards

If you are using our extensions please leave a review at the JED: IP Mapping | Issue Tracker | JAudit | Password Control

Please Log in or Create an account to join the conversation.

Time to create page: 0.138 seconds
Go To Top

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries