Jquery Tabs - Too many tabs
-
21-08-2019 - |
Question
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
Solution 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 "
OTHER TIPS
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; }