Home/ Questions/Q 9012029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T02:53:42+00:00

I am playing with the jquery tabs attempting to style them the way I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0