Thursday, September 6, 2018

Easy Horizontal tab scrolling solution

<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