Opened 8 years ago

Closed 6 years ago

Last modified 6 years ago

#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)

multi-row-tabs-nav.patch (1.3 KB) - added by sunaku 8 years ago.
even simpler patch: only one line change!

Download all attachments as: .zip

Change History (10)

comment:1 Changed 8 years ago by sunaku

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.

comment:2 Changed 8 years ago by sunaku

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 8 years ago by sunaku

Attachment: multi-row-tabs-nav.patch added

even simpler patch: only one line change!

comment:3 Changed 8 years ago by sunaku

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 8 years ago by Jörn Zaefferer

Milestone: TBD1.8
Priority: minormajor

comment:5 Changed 6 years ago by Scott González

Milestone: 1.91.later
Priority: majortrivial

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

comment:7 Changed 6 years ago by davidmurdoch

Fixed againdue to merge conflict in new pull request: https://github.com/jquery/jquery-ui/pull/299

comment:8 Changed 6 years ago by David Murdoch

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

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

Milestone: 1.later1.9
Note: See TracTickets for help on using tickets.