Opened 9 years ago

Closed 7 years ago

#5601 closed bug (worksforme)

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 9 years ago.
A quick example of what I'm trying to say.
jqueryui-tabs.png (31.5 KB) - added by juliobiason 9 years ago.
How it looks like right now in Firefox 3.6.3 for Linux.

Download all attachments as: .zip

Change History (18)

Changed 9 years ago by juliobiason

Attachment: columns.html added

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

Changed 9 years ago by juliobiason

Attachment: jqueryui-tabs.png added

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

comment:1 in reply to:  description Changed 9 years ago by 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.

comment:2 Changed 9 years ago by 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.

comment:3 Changed 9 years ago by 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

comment:4 Changed 9 years ago by 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.

comment:5 Changed 8 years ago by 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");

}

});

},

});

comment:6 Changed 8 years ago by martinp

Which is probably better implemented as -

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

comment:7 Changed 8 years ago by 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-->

comment:8 Changed 8 years ago by purewhite

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

comment:9 Changed 8 years ago by Scott González

Milestone: TBD1.9
Priority: minormajor
Status: newopen

comment:10 Changed 8 years ago by 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.

comment:11 Changed 8 years ago by 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.

comment:12 in reply to:  11 Changed 8 years ago by 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.

comment:13 Changed 7 years ago by Scott González

#8198 is a duplicate of this ticket.

comment:14 Changed 7 years ago by 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

It seems the issue comes down to the clearfix

.ui-helper-clearfix::after {
    clear: both;
}
Last edited 7 years ago by whuang (previous) (diff)

comment:15 Changed 7 years ago by 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

comment:16 Changed 7 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.