#7090 closed bug (notabug)

Opened March 09, 2011 01:46PM UTC

Closed March 09, 2011 01:51PM UTC

Last modified March 09, 2011 06:26PM UTC

Nested Tabs. Style rules for parent bleed over into child.

Reported by: eh Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.5
Keywords: Cc:
Blocked by: Blocking:
Description

This ticket duplicates #2489, which was closed without verification.

The basic problem is how the style rules for classes ui-tabs are written. By default, the selectors are written thus:

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

When you have nested tab sets, this means that such a rule matches both the parent .ui-tabs-nav as well as that of the child. This is the origin of the bleed over. I've verified this by manual examination in Firebug.

The fix is very simple. All that's required is to change the selectors to use the "immediate child" syntax:

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

I've made this change in my local source, in all the rules that begin with

.ui-tabs
. Works just fine. It got rid of the need to make extraneous and confusing override rules.

This change requires a change in documentation to require that the relevant elements actually be immediate children of the parent. This is IIRC how all the examples are written anyway.

Attachments (0)
Change History (5)

Changed March 09, 2011 01:51PM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

Child selectors can't be used as they don't work in IE 6. Furthermore, there is no requirement for the ul to be a direct child of the containing div. Lastly, there is nothing preventing you from styling nested tabs differently; you haven't even mentioned how you're trying to style the tabs. Please use the forums if you need help.

Changed March 09, 2011 05:49PM UTC by eh comment:2

This issue needs a resolution in documentation, then, by simply stating that nested tabs are not supported, since that seems to be the _de facto_ policy assertion here.

Changed March 09, 2011 05:54PM UTC by scottgonzalez comment:3

I have no idea what you're talking about. Nested tabs work fine. http://view.jqueryui.com/master/tests/visual/compound/tabs_tabs.html

Changed March 09, 2011 06:11PM UTC by eh comment:4

Perhaps by default they work, but apparently not with certain customizations, whose characterization I can only find a mystery. The example stated uses identical styles, and isn't applicable as a counter-example to the original report I referenced, nor to my particular case.

Therefore, given that I'm currently in the middle of tracking down where my child tab-set events are going, because they seem to be disappearing entirely, I no longer consider nested tabs to be supported in any practical sense.

Nor am I motivated in any way to spend the time tracking down a minimal example, because I don't expect it to be taken seriously, as I see a repeated finger-in-the-ears kind of attitude.

Changed March 09, 2011 06:26PM UTC by gnarf comment:5

We would love to fix a bug, or document a potential gotcha with nested tabs if you can help us to understand why your particular nested tabs are breaking.