Tabs get wrong height when near a float

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.

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.

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

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.

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");

}

});

},

});

Which is probably better implemented as -

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

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

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

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.

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.

Replying to [comment:11 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.

#8198 is a duplicate of this ticket.

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

It seems the issue comes down to the clearfix

.ui-helper-clearfix::after {
    clear: both;
}

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

clear

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

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.