How to make MaterializeCSS tabs scrollable when there are more tabs than container's width can contain without scrolling

Question

Given below is an example code (SSCCE) to demonstrate my problem. My problem is that the documentation of MaterializeCSS frontend framework says:

Scrollable Tabs Tabs automatically become scrollable

Source

But when I actually try it using more tabs than the screen width (or parent) can contain without scrolling, it does NOT work. Tabs DO NOT become scrollable .

So what is the solution or workaround for this problem?

This is what they show in their guide:

This is what I get when I follow their guide to write a test on my local server (Only 4 tabs are showing on screen while there are 11 tabs in total - and they are NOT scrollable):

 $('ul.tabs').tabs();

 .row { background-color: wheat; } ul { background-color: cyan; } li { background-color: pink; } html, body { overflow-x: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col l12"> <ul class="tabs"> <li class="tab col l3"><a href="tabOne" class="active">Tab 1</a></li> <li class="tab col l3"><a href="tabTwo" class="disabled">Tab 2 Disabled</a></li> <li class="tab col l3"><a href="tabThree" class="">Tab 3</a></li> <li class="tab col l3"><a href="tabFour" class="">Tab 4</a></li> <li class="tab col l3"><a href="tabFive" class="">Tab 5</a></li> <li class="tab col l3"><a href="tabSix" class="disabled">Disabled Tab 6</a></li> <li class="tab col l3"><a href="tabSeven" class="">Tab 7</a></li> <li class="tab col l3"><a href="tab Eight" class="">Tab 8</a></li> <li class="tab col l3"><a href="tab Nine" class="">Tab 9</a></li> <li class="tab col l3"><a href="tab Ten" class="">Tab 10</a></li> <li class="tab col l3"><a href="tab Eleven" class="">Tab 11</a></li> </ul> </div> </div> <!--.row-->

Answer 1

Check this out..... after 3 changes it works...

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

 .row { background-color: wheat; } ul { background-color: cyan; } li { background-color: pink; } html, body { overflow-x: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col l3"><a href="tabOne" class="active">Tab 1</a></li> <li class="tab col l3"><a href="tabTwo" class="disabled">Tab 2 Disabled</a></li> <li class="tab col l3"><a href="tabThree" class="">Tab 3</a></li> <li class="tab col l3"><a href="tabFour" class="">Tab 4</a></li> <li class="tab col l3"><a href="tabFive" class="">Tab 5</a></li> <li class="tab col l3"><a href="tabSix" class="disabled">Disabled Tab 6</a></li> <li class="tab col l3"><a href="tabSeven" class="">Tab 7</a></li> <li class="tab col l3"><a href="tab Eight" class="">Tab 8</a></li> <li class="tab col l3"><a href="tab Nine" class="">Tab 9</a></li> <li class="tab col l3"><a href="tab Ten" class="">Tab 10</a></li> <li class="tab col l3"><a href="tab Eleven" class="">Tab 11</a></li> </ul> </div> </div>

Answer 2

I finally solved the problem by adding this to my main style.css

.tabs {
     display: flex !important
}