#9111 closed bug (fixed)

Opened February 22, 2013 10:26AM UTC

Closed February 22, 2013 01:53PM UTC

Tabs: Can't inherit border-bottom-color for vertical tabs

Reported by: bg100 Owned by:
Priority: minor Milestone: 1.10.2
Component: ui.tabs Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

When styling the jQuery UI Tabs widget as vertical tabs, its impossible to make the border-bottom-color of the tab's <li> element show as the color defined by the CSS generated by the themeroller.

My forum post explains the issue in detail:

https://forum.jquery.com/topic/how-do-i-style-jquery-ui-tabs-vertically-with-a-correctly-themed-border-20-2-2013

This jsFiddle highlights the problem:

http://jsfiddle.net/bg100/3mHeA/

Is it possible to change the following themeroller generated CSS line from this:

.ui-tabs .ui-tabs-nav li { border-bottom: none; }

to this:

.ui-tabs .ui-tabs-nav li { border-bottom-width: 0; }

to allow me to override this without messing up the color like this:

.ui-tabs-vertical > .ui-tabs-nav li { border-bottom-width: 1px; }

Attachments (0)
Change History (2)

Changed February 22, 2013 01:52PM UTC by scottgonzalez comment:1

milestone: none → 1.10.2
status: new → open
summary: Unable to set border-bottom-color CSS property for vertical tabs → Tabs: Can't inherit border-bottom-color for vertical tabs

Note that you'll also want to be setting border-bottom-width: 1px instead of border-bottom: 1px solid in your custom CSS.

Changed February 22, 2013 01:53PM UTC by Scott González comment:2

resolution: → fixed
status: open → closed

Tabs: Use border-bottom-width instead of border-bottom to remove the border on tabs. Fixes #9111 - Tabs: Can't inherit border-bottom-color for vertical tabs.

Changeset: 1c5171c2547130a76710dd20108b35774551e333