#4882 closed bug (fixed)
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 (10)
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
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 13 years ago by
| Attachment: | multi-row-tabs-nav.patch added |
|---|
even simpler patch: only one line change!
comment:3 Changed 13 years ago by
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.
comment:4 Changed 13 years ago by
| Milestone: | TBD → 1.8 |
|---|---|
| Priority: | minor → major |
comment:5 Changed 12 years ago by
| Milestone: | 1.9 → 1.later |
|---|---|
| Priority: | major → trivial |
Bumping this down since we don't recommend having tabs that wrap to multiple lines.
comment:7 Changed 12 years ago by
Fixed againdue to merge conflict in new pull request: https://github.com/jquery/jquery-ui/pull/299
comment:8 Changed 12 years ago by
| 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
comment:9 Changed 12 years ago by
| 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.