Materialize: Tabs tab indicator missing on load

[joxmar]

I'm having issues with the tabs, the tab indicator is missing when the tabs are loaded, The first tab is the default and the tab text is colored as selected tab and displaying the correct content but the indicator is missing. There's only 2 ways to get the indicator to show:

1. When I start clicking on the tabs the indicator appears and then stays working correctly
2. When the tabs load and I re-size the window the indicator appears

this is what I have:

<div class="container">         
  <div class="row">
    <div id="rmt-rooms" class="col s12 m3">
     Some stuff
    </div>      

    <!-- tabs -->
    <div id="rmt-dialog" class="col s12 m9">
      <div class="card-panel">
        <div class="row">
          <div class="col s12">
            <ul class="tabs">
              <li class="tab"><a href="#roomType" class="active">Room Type</a></li>
              <li class="tab"><a href="#roomPhotos">Room Photos</a></li>        
              <li class="tab"><a href="#roomNumbers">Room Numbers</a></li>
            </ul>
          </div>
          <div id="roomType" class="col s12"></div>
          <div id="roomPhotos" class="col s12"></div>
          <div id="roomNumbers" class="col s12"></div>
        </div>                      
      </div>                        
    </div>  
    <!--End  tabs -->                       
  </div>
</div>

[gnicol-bzh]

I have the same problem.

~since Chrome 44 (didn't use tabs on older Chrome,46 currently)
~Windows 7
~haven't tried on other browser yet

[evallgar]

It also fails on OS X Firefox 41.0.2 and Safari 9.0.1

I dont think its a browser issue.

[loolooii]

I have the same problem! Is there any fix for this?

[ghost]

This issue is hard to reproduce

[loolooii]

@chifreaigle I have a tab somewhere inside another (main) tab, maybe that helps? Also, the class "active" is correctly set. Only left:x and top:y are set after actually clicking on a tab (which then shows the indicator color).

[ghost]

@loolooii Yeah,i got the steps to reproduce the issue, when making a tab(secondary tab) inside an other tab(main tab) makes the indicator of the secondary tab invisible, as @joxmar said the only way to get it showing is by either resizing or selecting the tab,Here is an example
https://jsfiddle.net/80jkvumd/
EDIT: you cant see the issue on fiddle you have to copie that in a real html file(dont forget resources like mrl.css mtr.js and jquery)
EDIT2: as @evallgar said, This NOT a browser issue.

[julianctni]

Just got the same issue. Tab indicator not showing, only after resizing the window. Is there any workaround or solution meanwhile?

[adamhammond]

@julianctni for a quick fix, you could:

At the end of your event handler for $(document).ready, add the following:
window.dispatchEvent(new Event('resize'));

[ghost]

I can't do that because my tabs are in a modal. It makes the indicator the entire width of the tabs. (underlines all tabs end to end)

[ghost]

Nevermind, I just put @adamhammond 's one-liner in the modal::ready callback

[mangakid]

I had the same issue, also with the tabs in a modal, the solution I used was:
$('#my-modal').modal({
ready: function(modal, trigger) {
$('ul.tabs').tabs();
}
});

[abraaoz]

If you are using tabs inside "collapsible" elements, you must apply @adamhammond fix inside "onOpen" event, like this:

$('.collapsible').collapsible({
    onOpen: function(el) {
        // https://github.com/Dogfalo/materialize/issues/2102
        window.dispatchEvent(new Event('resize'));
    }
});

[makindemayowa]

This worked for me.
$(document).ready(function(){ $('ul.tabs').tabs(); });

[dinho19sp]

This worked for me, i'm using angular 6, this tab not work with route-outlet.. thanks