Materialize tab indicator always overflows

Question

I'm using the tab element of the Materializecss framework and I'm trying to make a simple 3 tab slider.

For some reason, whenever I add a third tab, the bottom tab indicator always overflows to the right making a scroll bar appear:

My code is simple:

<div class="col s12" id="charging_history_tabs">
    <ul class="tabs">
        <li class="tab col s4">
            <a href="#charging_history_chart_tab">Line Chart</a>
        </li>
        <li class="tab col s4">
            <a href="#charging_history_sankey_tab">Sankey Diagram</a>
        </li>
        <li class="tab col s4">
            <a href="#download_tab">Download Session Data</a>
        </li>
    </ul>
</div>

<div class="row" id="charging_history_chart_tab">
    <div class="col s12">
        <canvas id="charging_history_chart" width="400" height="200"></canvas>
    </div>
</div>

<div class="row" id="charging_history_sankey_tab">
    <div class="col s12">
        <div id="sankey_basic" style="width: 800px; height: 500px;"></div>
    </div>
</div>

<div class="row" id="download_tab">
    <h1> hello there!</h1>
</div>

Can anyone tell me what I'm doing wrong?

https://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page, maybe. maybe not — joshmoto, Jul 27 '18 at 03:14

score 0 · Answer 1 · answered Jan 30 '19 at 08:54

You didn't enclose your tab code into a div with class="row" so col isn't rendered correctly...

Try like this:

<div class="row">
      <div class="col s12" id="charging_history_tabs">
          <ul class="tabs">
              <li class="tab col s4">
                  <a href="#charging_history_chart_tab">Line Chart</a>
              </li>
              <li class="tab col s4">
                  <a href="#charging_history_sankey_tab">Sankey Diagram</a>
              </li>
              <li class="tab col s4">
                  <a href="#download_tab">Download Session Data</a>
              </li>
         </ul>
     </div>
</div>

score -1 · Answer 2 · answered Jul 27 '18 at 03:11

-1

A scrollbar appears because there is not enough space. If you alter the width of the container, or the elements within the container, it should work out.

answered Jul 27 '18 at 03:11

B.Tibell

19
7

Materialize tab indicator always overflows

2 Answers2