<div id='test_tabs'> <ul> <li><a href="#test_tab1">Test long tab 1</a></li> <li><a href="#test_tab2">Test long tab 2</a></li> <li><a href="#test_tab3">Test long tab 3</a></li> <li><a href="#test_tab4">Test long tab 4</a></li> <li><a href="#test_tab5">Test long tab 5</a></li> <li><a href="#test_tab6">Test long tab 6</a></li> <li><a href="#test_tab7">Test long tab 7</a></li> <li><a href="#test_tab8">Test long tab 8</a></li> </ul> <div id="test_tab1"> <p>Content for Tab 1</p> </div> <div id="test_tab2"> <p>Content for Tab 2</p> </div> <div id="test_tab3"> <p>Content for Tab 3</p> </div> <div id="test_tab4"> <p>Content for Tab 4</p> </div> <div id="test_tab5"> <p>Content for Tab 5</p> </div> <div id="test_tab6"> <p>Content for Tab 6</p> </div> <div id="test_tab7"> <p>Content for Tab 7</p> </div> <div id="test_tab8"> <p>Content for Tab 8</p> </div> </div>Apply styles to add horizontal scrolling
.ui-tabs .ui-tabs-nav { width: 100%; white-space: nowrap; overflow-x: auto } .ui-tabs .ui-tabs-nav li { float: none; display: inline-block;}Execute jQuery's tab function
$("#test_tabs").tabs();
Source:http://jsfiddle.net/pdnr0op9/3/
Still untested but this could work for iOS related issues with the sliding functionality: https://stackoverflow.com/questions/30574110/how-to-fix-horizontal-scroll-on-ios-mobile#answer-38606898
No comments:
Post a Comment