CODEWITHSUNDEEP
jqueryhtmlcss
Octavius
Octavius

Reputation: 583

Styling Jquery-ui tabs

I am playing with the jquery tabs attempting to style them the way I see fit. I attempted to shrink the tabs and added a height:45px; to the UI stylesheet as seen below. 

.ui-tabs-vertical .ui-tabs-nav li { 
  clear: left; 
  height:45px; 
  width: 100%; 
  border-bottom-width: 1px !important; 
  border-right-width: 0 !important;
  margin: 0 -1px .2em 0;
}

Yet, instead of shrinking all the tabs it kept one (the last one) unchanged. It can be seen here, the tab labeled Trash JS-FIDDLE demo. I would like to understand what is going on and how I can fix it. Also, any other coding tips would be greatly appreciated.

Upvotes: 5

Views: 329

Answers (3)

bart s
bart s

Reputation: 5100

The anchor tag inside the li is higher than the li. If you restrict that height it can work.

    .ui-tabs-vertical .ui-tabs-nav li a { height: 30px; }

See updated fiddle

I just noticed with chrome developer tools that your tabs are overlapping. Only the last one is not overlapped and therefore looks taller than the others.

Upvotes: 4

gotqn
gotqn

Reputation: 43626

Playing with this height will solve the issue:

.accordion li > a {height:30px !important; }

Upvotes: 0

user1889017
user1889017

Reputation:

First shirink the font size in widget 

.ui-widget{font-family:Arial,sans-serif;font-size:medium}

Upvotes: 1

Related Questions