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: |
Description
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)
Change History (9)
Changed October 17, 2009 09:29PM UTC by comment:1
Changed October 17, 2009 10:12PM UTC by comment:2
I posted screenshots of what I see before & after applying the attached patch in various browsers here: http://snk.tuxfamily.org/ext/jquery-ui-tabs/
Changed November 07, 2009 07:46AM UTC by comment:3
Hi,
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 comment:4
| milestone: | TBD → 1.8 |
|---|---|
| priority: | minor → major |
Changed May 11, 2011 01:18PM UTC by comment:5
| milestone: | 1.9 → 1.later |
|---|---|
| priority: | major → trivial |
Bumping this down since we don't recommend having tabs that wrap to multiple lines.
Changed May 11, 2011 08:17PM UTC by comment:6
Changed May 17, 2011 05:38PM UTC by comment:7
Fixed againdue to merge conflict in new pull request: https://github.com/jquery/jquery-ui/pull/299
Changed May 17, 2011 06:13PM UTC by comment:8
| resolution: | → fixed |
|---|---|
| status: | new → closed |
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 comment:9
| milestone: | 1.later → 1.9 |
|---|
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.