Skip to main content

Search and Top Navigation

#5601 closed bug (worksforme)

Opened May 10, 2010 01:36PM UTC

Closed July 27, 2012 06:26PM UTC

Tabs get wrong height when near a float

Reported by: juliobiason Owned by:
Priority: major Milestone: 1.9.0
Component: ui.tabs Version: 1.8.1
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (2)
  • columns.html (1.1 KB) - added by juliobiason May 10, 2010 01:36PM UTC.

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

  • jqueryui-tabs.png (31.5 KB) - added by juliobiason May 10, 2010 01:37PM UTC.

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

Change History (16)

Changed May 10, 2010 04:17PM UTC by watanabe comment:1

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.

Changed May 11, 2010 03:01AM UTC by watanabe comment:2

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.

Changed June 09, 2010 01:23PM UTC by arpitt comment:3

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

Changed June 28, 2010 01:54AM UTC by micky comment:4

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.

Changed October 31, 2010 12:00AM UTC by martinp comment:5

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

}

});

},

});

Changed October 31, 2010 12:48AM UTC by martinp comment:6

Which is probably better implemented as -

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

Changed November 20, 2010 09:12AM UTC by ibusse comment:7

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

Changed May 02, 2011 06:01AM UTC by purewhite comment:8

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

Changed May 18, 2011 12:55PM UTC by scottgonzalez comment:9

milestone: TBD1.9
priority: minormajor
status: newopen

Changed July 30, 2011 05:49AM UTC by pizzico85 comment:10

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.

Changed September 01, 2011 04:44PM UTC by kirbysayshi comment:11

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.

Changed September 08, 2011 07:15PM UTC by scottgonzalez comment:12

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.

Changed March 15, 2012 04:45PM UTC by scottgonzalez comment:13

#8198 is a duplicate of this ticket.

Changed July 27, 2012 03:36PM UTC by whuang comment:14

_comment0: 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 probably1343405438539704

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

Changed July 27, 2012 05:59PM UTC by mpetrovich comment:15

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

Changed July 27, 2012 06:26PM UTC by scottgonzalez comment:16

resolution: → worksforme
status: openclosed

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.