Jquery Tabs - Too many tabs

Question

Hi,

I am using JQuery tabs. The problem is when there are too many tabs, some tabs are squeezed to the next line and the layout looks weird. I am not setting the "width" property of the <div> of the tab. Is there anyway to have the <div> to auto stretch instead of squeezing the tabs to the next line?

Thanks for the help

Answer 1

If i look at the provided CSS theme, i would play around with :

.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }

try something like:

.ui-tabs .ui-tabs-nav li {
width:auto;
min-width:auto;
}

Answer 2

After I took a look a the css file and played around with the style a bit, I needed to add "display:inline" to ".ui-tabs .ui-tabs-nav li"

Also, when the there are too many tabs, some tabs are pushed down to a new line. Some tabs might shift if I click on an item in the first tab. I fixed this by removing "padding-bottom" in ".ui-tabs .ui-tabs-nav li.ui-tabs-selected "

Answer 3

Your fix worked quite nicely. Thanks a million! I was having the same problem for days!