How to enable horizontal scrolling on jQuery tabs within a specific width on a single line .
By default, jQuery UI plugin moves the last tab on next line.
So, I've been using a workaround to increase the width by a bit by setting the css style as below,
#tabs_div .scroller {
overflow: auto;
}
#tabs_div ul {
width: 1100px;
}
And tabs are set as below,
<div id='tabs_outer_div' class="tabs">
<div id='tabs_div' class="scroller" style='display:none;width:100%'>
<ul>....
</div>
</div>
Edited to include jsfiddle, here the tabs are shown in multiple rows. How to set them in one single row (line). - http://jsfiddle.net/karthikn_jay/pdnr0op9/
Just add Custom style in your style sheet to .ui-tabs .ui-tabs-nav
and .ui-tabs .ui-tabs-nav li
if need add parent level unique selector
http://jsfiddle.net/pdnr0op9/3/ like this
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.