Tabs get wrong height when near a float

[juliobiason]

I have a two-column layout, with a sidebar in the left side. The right side will have the tabs. The height of the tabs header, though, uses to whole height of the sidebar, which makes it look pretty weird.

[juliobiason]

A quick example of what I'm trying to say.

[juliobiason]

How it looks like right now in Firefox 3.6.3 for Linux.

[watanabe]

element "ui" has class "ui-helper-clearfix".

See: jquery-ui-1.8.custom.css.

.ui-helper-clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

The content "." appears below floated elements.(clear both.)

I don't know how to work around.
I don't know clearfix well.

[watanabe]

​http://jqueryui.com/themeroller/ This page has a sidebar and a tab.

$("#tabs").css("float", "left");

seems to work in this page.

But I think ".tabs()"(the tabs component) should not change the float property.

[arpitt]

Hi,

I'm having the exact same problem for certain Government of Canada sites. This is a pretty big problem though, since sites follow a pretty strict template.

Although I'm not a CSS guru, I had some help from somebody that is. This is what was required to get the Tabs widget to work.

This is the solution I received. I can't guarantee this will work in all situations, but hopefully it will be a step in the right direction:

1) remove class “ui-helper-clearfix” off the <ul> 2) add style=”overflow: hidden; width: 98.5%;” on the <ul>

Note: “width: 98.5%;” only seems to be required by IE6

More specifically, the problem was with the “clear” on this class in file “jquery-ui.css”:

.ui-helper-clearfix:after {

clear:both; content:"."; display:block; height:0; visibility:hidden;

} Tested on latest versions of Firefox and Chrome, IE8 (compat. view off) and IE6.

Until this fix gets rolled into jQuery-UI, we will have to stick with our own custom Tabs implementation, since I really don't want to get into the habit of re-patching jQuery CSS in the event of an upgrade.

Is there an approximate time line as to when this bug might be handled?

We're currently using jQuery-UI 1.8.1, our pages are XHTML compliant and validate.

Thanks.

• Andrew

[micky]

hi, I'm having the same problem too...and I have a solution. Although I don't know why (it's pretty wired) but it really does work,and it's simple:

Just define a style to that "#tabs" like this:

<div id="tabs" style="overflow:hidden;">
<!-- <ul> and others goes here... -->
</div>

Tested on latest versions of Firefox and Chrome, IE7 and IE6.

[martinp]

I am using dynamically loaded content and I had the same problem. I found that it worked properly if I did this -

$("#tabsMain").tabs({

cache: true, ajaxOptions: {ifModified: true}, load: function(event, ui){

$(".ui-widget-content:not(.ui-tabs)").each(function(index){

if(!$(this).hasClass("ui-helper-clearfix")){

$(this).addClass("ui-helper-clearfix");

}

});

},

});

[martinp]

Which is probably better implemented as -

$(".ui-widget-content:not(.ui-tabs):not(.ui-helper-clearfix)").addClass("ui-helper-clearfix");

[ibusse]

I usually use the following to completely replace ui-helper-clearfix:

<!-- style type='text/css' media='screen'>
.ui-helper-clearfix:after { }
.ui-helper-clearfix {
        overflow: hidden; /* or auto */
        zoom: 1; /* required for ie hasLayout */
}
</style-->

[purewhite]

This bug also effects my projects. Would be great if it was fixed.

[pizzico85]

Also I have the same problem. It seems to happen when you have more jQuery UI tabs on the same HTML page. I tested with many tabs and only some of those don't look good as reported in the ticket.

[kirbysayshi]

I have the same problem, which can be fixed by adding overflow:hidden to the tabs element. The issue does appear to be related to having floats nearby. For example, the main navigation on the page I'm working on was float:left, while the content area had a huge margin to push it away from the float. In this case, the tab control bar takes the same height as the navigation (the floated element).

I have created a jsfiddle case to demonstrate: ​http://jsfiddle.net/MBShQ/

Notice how the first set of tabs (with style="overflow:hidden") sizes according to content, but the second set takes the remaining height of the .main-nav, implying that it's being laid out as if the nav were a floated child of the tabs.

How to fix this?

possibly to add overflow:hidden to the stylesheet:

.ui-helper-clearfix { display:block; min-width: 0; overflow: hidden; }

But I can't say what further interactions that will have in older browsers or with the other widgets.

[Scott González]

Replying to kirbysayshi

I have created a jsfiddle case to demonstrate: ​http://jsfiddle.net/MBShQ/

Notice how the first set of tabs (with style="overflow:hidden") sizes according to content, but the second set takes the remaining height of the .main-nav, implying that it's being laid out as if the nav were a floated child of the tabs.

I don't see overflow: hidden in that fiddle and the first set of tabs is stretched. In addition, you have duplicate ids in that fiddle.

[Scott González]

#8198 is a duplicate of this ticket.

[whuang]

adding overflow:hidden to

.ui-tabs .ui-tabs-nav {}

or overflow: auto/hidden to

.ui-tabs {}

seems to fix this issue, but causes an additional issue to existing styles probably

[mpetrovich]

It's not a UI tabs issue but rather a float layout issue with the example provided above: ​http://jsfiddle.net/MBShQ/

Basically, .main-nav and the .ui-helper-clearfix:after pseudo-element in .main-content are in the same block formatting context, so the clearfix's clear: both; forces the pseudo-element to clear .main-nav's float and move below it. You can see this behavior more clearly by removing the left margin on .main-content and adding a background color to .main-nav: ​http://jsfiddle.net/mpetrovich/MBShQ/43/

The solution, then, is simply to create a new block formatting context for .main-content to insulate any contained clears. According to the spec ( ​http://www.w3.org/TR/CSS2/visuren.html#block-formatting ), setting overflow: auto; will do the trick: ​http://jsfiddle.net/mpetrovich/MBShQ/44/

Note: All jsfiddle demos use both edge versions of jQuery & jQuery UI

[Scott González]

Closing as works for me, based on the previous comment. This has stayed open for so long because there's no clear answer of whether tabs should be trying to prevent the float from leaking out. I agree with mpetrovich that this should just be handled on a case by case basis in userland.