Skip to main content

Search and Top Navigation

#4882 closed bug (fixed)

Opened September 28, 2009 04:53PM UTC

Closed May 17, 2011 06:13PM UTC

Last modified May 17, 2011 06:14PM UTC

Selected Tab CSS causes problem when tabs are wrapped onto more than one line

Reported by: sc0rchin Owned by:
Priority: trivial Milestone: 1.9.0
Component: ui.tabs Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:

To replicate this issue simple create a tab set that generates more tabs than will fit on one line and then select any tab on the first row. All tabs on the next row down will be shifted to the right because the base of the selected tab drops below the baseline.

The following modification to line 7 of ui.tabs.css fixes it in the most modern browsers you would need to check older ones. This fix simple nudges the selected tab up due to the CSS setting of { top: 1px } set on each tab.

.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-top: -1px; margin-bottom: 0; padding-bottom: 1px; }

Attachments (1)
  • multi-row-tabs-nav.patch (1.3 KB) - added by sunaku November 07, 2009 07:37AM UTC.

    even simpler patch: only one line change!

Change History (9)

Changed October 17, 2009 09:29PM UTC by sunaku comment:1

The solution described in this bug report does not work for me.

Instead, the attached "multi-row-tabs-nav.patch" patch does work for me in Firefox 3.5, Opera 9.52, IE6, IE7, IE8, Chrome 3, and Safari 4 alike.

A minor side-effect of the attached patch is that the gap between non-selected tabs and the border of .ui-tabs-nav is reduced by 1px. The gap is now *just* wide enough for the .ui-tabs-nav border to be seen, but it is certanily more subtle than before. IMHO this gives a better sense of cohesion between tabs and the tab panel beenath them.

Thanks for your consideration.

Changed October 17, 2009 10:12PM UTC by sunaku comment:2

I posted screenshots of what I see before & after applying the attached patch in various browsers here:

Changed November 07, 2009 07:46AM UTC by sunaku comment:3


I've attached an ever simpler patch: only one line change!

The result is the same as before (as shown in the screenshots mentioned in my previous comment on this bug report).

Thanks for your consideration.

Changed November 17, 2009 06:32PM UTC by jzaefferer comment:4

milestone: TBD1.8
priority: minormajor

Changed May 11, 2011 01:18PM UTC by scottgonzalez comment:5

milestone: 1.91.later
priority: majortrivial

Bumping this down since we don't recommend having tabs that wrap to multiple lines.

Changed May 11, 2011 08:17PM UTC by davidmurdoch comment:6

Changed May 17, 2011 05:38PM UTC by davidmurdoch comment:7

Fixed againdue to merge conflict in new pull request:

Changed May 17, 2011 06:13PM UTC by David Murdoch comment:8

resolution: → fixed
status: newclosed

Tabs: Fixed CSS when tabs wrap onto multiple lines. Fixes #4882 - Selected Tab CSS causes problem when tabs are wrapped onto more than one line.

Changeset: 1bd139aaf9e4fc68f8f56ca5aeef5e9681ff177e

Changed May 17, 2011 06:14PM UTC by scottgonzalez comment:9

milestone: 1.later1.9