Opened 7 years ago

Closed 7 years ago

#9111 closed bug (fixed)

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

Change History (2)

comment:1 Changed 7 years ago by Scott González

Milestone: none1.10.2
Status: newopen
Summary: Unable to set border-bottom-color CSS property for vertical tabsTabs: 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.

comment:2 Changed 7 years ago by Scott González

Resolution: fixed
Status: openclosed

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

Note: See TracTickets for help on using tickets.