UI Tabs not wrapping nicely when more than 1 row of tabs
Permalink Browser Info Environment
With the jQuery.UI styled tabs templates, there is a possibility that tabs that extend beyond a single row will not wrap cleanly. This only happens with some themes and specifically some font sizes.
Magic tabs takes the UI css straight from jQuery.UI. If you experience disjointed wrapping, the problem stems from the bottom margin of the tabs li element.
For now I don't want to change the standard templates for this because the whole purpose of the ui template is to follow ui styling and use css almost straight from ui. However, if you experience the issue and need to resolve it, the solution is to create a custom template by copying the Magic Tabs jQuery.ui template.
Within this new custom template, the style rule that needs to be adjusted is '.ui-tabs .ui-tabs-nav li'. Within this rule is an overal margin setting that can be changed as below (I have changed the lower margin from 0px to 3px, you may want to play with that further depending on your theme):
Or alternatively, simply specify a bottom margin in addition to the overall margins rule:
There details about creating custom templates in the Magic Tabs documentation. If anyone needs further guidance on this, please post here, pm me, or open a support request.
Magic tabs takes the UI css straight from jQuery.UI. If you experience disjointed wrapping, the problem stems from the bottom margin of the tabs li element.
For now I don't want to change the standard templates for this because the whole purpose of the ui template is to follow ui styling and use css almost straight from ui. However, if you experience the issue and need to resolve it, the solution is to create a custom template by copying the Magic Tabs jQuery.ui template.
Within this new custom template, the style rule that needs to be adjusted is '.ui-tabs .ui-tabs-nav li'. Within this rule is an overal margin setting that can be changed as below (I have changed the lower margin from 0px to 3px, you may want to play with that further depending on your theme):
.ui-tabs .ui-tabs-nav li { /*margin: 0 .2em 1px 0;*/ margin: 0px .2em 3px 0; }
Or alternatively, simply specify a bottom margin in addition to the overall margins rule:
.ui-tabs .ui-tabs-nav li { margin: 0 .2em 1px 0; margin-bottom:3px; }
There details about creating custom templates in the Magic Tabs documentation. If anyone needs further guidance on this, please post here, pm me, or open a support request.
| Type: | Discussion |
|---|---|
| Status: | Archived |
