jQuery tabs enable horizontal scroll

Question

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/

Can you share a Live fiddle..! it helps us see your work and shoot the issue easily — Deepak Yadav
– Deepak Yadav, Commented Jun 11, 2015 at 9:30

Karthi Keyan · Accepted Answer · 2015-06-11 10:36:51Z

3

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

answered Jun 11, 2015 at 10:36

Karthi Keyan

7946 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1