Tabs tab indicator missing on load

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>

[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'));

[makindemayowa]

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