1

I have a navigation bar with different tabs based on Materialize CSS (http://materializecss.com/tabs.html). I have more tabs than fit the width of the browser window so it automatically generates a horizontal scrollbar. This is unsightly for modern websites so I am looking for a way to hide it but still allow scrolling.

Other comments on SO have mentioned using positioning for nested divs, however, I can't seem to get this to work in this scenario, so I was wondering if anyone could point out what I am doing wrong?

Below is a codepen of my code so far: http://codepen.io/anon/pen/LGvQRP

Here is the code:

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
</div>

And the javascript:

$(document).ready(function(){
    $('ul.tabs').tabs();
});

Additionally, I would want to extend it so that the selected tab is always in the middle and the scroll would be infinite with it restarting after all options are exhausted. Does anyone have any hints on this?

user2694306
  • 3,832
  • 10
  • 47
  • 95
  • you should hidden the .tabs scroll with overflow:hidden and make a jquery event that scroll your ul to the end or to the beguining when you click at the extremely itens.. i answer propelly when i came home – Marvin Medeiros Feb 17 '16 at 19:45
  • Try this solution: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – User1234 Feb 17 '16 at 20:28
  • I've tried it, but unfortunately it didn't work. I've updated the codepen to have that attempt included. – user2694306 Feb 17 '16 at 21:48

1 Answers1

2

Try:

<ul class="tabs" style="overflow-x: hidden">
Vitorio Jorge Silva Tavares
  • 21
  • 3