Opened 7 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; }

Change History (9)

comment:1 Changed 7 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 7 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/

comment:3 Changed 7 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 7 years ago by jzaefferer

  • Milestone changed from TBD to 1.8
  • Priority changed from minor to major

comment:5 Changed 6 years ago by scottgonzalez

  • Milestone changed from 1.9 to 1.later
  • Priority changed from major to trivial

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 set to fixed
  • Status changed from new to 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 6 years ago by scottgonzalez

  • Milestone changed from 1.later to 1.9
Note: See TracTickets for help on using tickets.