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):

.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;

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: New
View Replies:

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.