Instructions for creating scrollable MaterializeCSS tabs when there are too many tabs to fit within the width of the container without scrolling

Here is an example code (SSCCE) that showcases the issue I am facing. The MaterializeCSS frontend framework documentation states:

Scrollable Tabs Tabs automatically become scrollable

Source

However, when I attempt to use more tabs than can fit on the screen width without scrolling, the tabs do not actually become scrollable as promised in the documentation.

I am looking for a solution or workaround to address this problem.

The guide provided by the documentation shows this image:

https://i.sstatic.net/LI0EL.png

But when I run a test on my local server following their instructions, only 4 tabs are visible on the screen out of a total of 11 tabs - and they are not scrollable as shown in this image:

https://i.sstatic.net/33Q0R.png

$('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-->

jqueryhtmlcssmaterial-designmaterialize

Answer №1

Take a look at this... it finally started working after 3 modifications...

$(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

After much trial and error, I managed to find a solution by including the following code snippet in my primary style sheet:

.tabs {
     display: flex !important
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up a slider in Jquery UI

This problem has got me scratching my head! The slider on this link is functioning perfectly: http://jsfiddle.net/EuTA8/ $("#s2").slider({ min: 0, max: 200, step: .1, value: 100.0, values: [200.0], slide: ...

jqueryjquery-ui

What is the best way to include both left and right borders in HTML/CSS

I'm looking to add left and right borders to a specific cell within my table. Utilizing Bootstrap 4 beta, I attempted the following code snippet: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="style ...

htmlcssbootstrap-4

Closing the space between vertical edges of table data cells

I'm currently in the process of translating my resume from MS Word to HTML and CSS for easier maintenance and sharing purposes. I really like the layout and style of my resume and want to maintain it. The design features a left column with bold titles ...

htmlcsshtml-table

Tips for changing the CSS properties of input elements in iView

Exploring Vue's single file components and experimenting with the iView UI framework. Here is a snippet of code I am working with: <template> <div> <i-input class="cred"/> </div> </template> I want to adjust the ...

cssvue.jsiview-ui

Changing the close button icon in highslide popups

Utilizing highslide together with highcharts, I need to customize the functionality of the close button. Specifically, I want to trigger an additional function when a user clicks on the "X" button. Upon inspecting the "X" button, this is what appears in m ...

javascriptjqueryhighchartshighslide

Ways to extract a specific line of text from HTML code

Can someone help me extract a specific line from an HTML code using Python? For instance, in this website: The snippet of code is as follows: var episodes = [[8,54514],[7,54485],[6,54456],[5,54430],[4,54400],[3,54367],[2,54327],[1,54271]]; I am lookin ...

pythonhtmlweb

The positioning of the Bootstrap dropdown menu is not aligned correctly

Issue with positioning Bootstrap dropdown I recently encountered a problem where I placed a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", but the dropdown menu still appeared in its original position. It seems l ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

slider not functioning properly at the moment

I am in need of assistance with Fraction Slider from @jacksbox. I have read through the documentation multiple times, but I cannot seem to get my slider to display the effects it is meant to. The website I am working on can be found at . Here is an example ...

javascriptjqueryslider

Is there a way to determine if a browser supports the offline event?

I attempted to implement the code from this Stack Overflow question: How can I check for support of the `focusin` event? However, in Chromium, the method hasEvent('offline') returns false even though it supports the `offline` event. Does anyone ...

javascripthtmldom-events

An error of type 'System.Web.HttpException' occurred during the file upload process to the server

Recently, I have started learning about asp.net, ajax, and c#. I am attempting to save an image on the server using the example below: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> ...

c#jqueryasp.netajax

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

htmlcss

Align the elements of the contact form to the opposite sides

I am experiencing an issue with my contact form where all elements are flowing horizontally instead of vertically. I would like everything to be floated to the left and aligned vertically, except for the "message" box and submit button which should be on t ...

csscss-floatcontact-form

Failure to connect HTML and CSS files

My HTML and CSS files are not linking even though they are in the same folder. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl ...

htmlcss

Interact with HTML Radio Buttons to Trigger Input Opening

I need to have a message saying "We're sorry..." and a "black box" displayed only when the radio button is set to YES, otherwise keep it hidden. Can I achieve this using JavaScript only, or is there a way to do it with HTML alone? <h3 >Did you ...

javascripthtmlcssradio-button

Updating certain fields in AngularJS with fresh data

I am facing a challenge with the following code snippet: <div ng-controller="postsController"> <div id = "post_id_{{post.postid}}" class = "post" ng-repeat="post in posts"> ...... <div class="comments"> < ...

javascripthtmlangularjs

What is the best way to design a three-color column layout without any text?

I am attempting to design a three-color column layout using Bootstrap without any text. I have successfully created the columns with the desired colors, but I am facing an issue regarding how to remove the text without affecting the size of the columns. W ...

htmlcssbootstrap-4

Change the z-index of divs when clicked

When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...

javascriptjquerycss

The "Splash Screen Div" page displayed during transitions and page loading

Creating a "Splash Screen Div" for a loading page involves waiting until everything is loaded and then hiding or moving the div off screen. Below is an example: index.html <div id="loading-Div"> <div id="bear-Logo"> < ...

javascriptcsshtml

Making adjustments to text in HTML without altering the CSS or styling is proving to be challenging

When attempting to modify a h1 tag without changing the CSS, I encountered an issue. Below is the string with and without the JavaScript: String without JavaScript: https://i.sstatic.net/JWOmq.png String with JavaScript: https://i.sstatic.net/RNMur.png ...

javascripthtmldom

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js