Materialize active tab not working in Modal

Question

The active tab doesn't show an underline when in a Modal even though I have given one of the tabs a class of active. However, once I click on one of the tabs it starts working. What is the issue?

Here is a JSFiddle.

And here is the spot where I'm giving the element the proper class name:

...
<a class="active" href="#test1">Test 1</a>
...

Any help would be appreciated.

Answer 1

The underline will show if you initialize the tabs using the ready option of the Modal window.

Something like this:

$('.modal-trigger').leanModal({
    ready: function () {
        $('ul.tabs').tabs();
    }
});

Here is a fiddle: https://jsfiddle.net/powxw392/

If you want a bit of an animation when you pop the modal window, place the tabs initialization outside of the modal function and add a click event like so:

$('ul.tabs').tabs();
$('.modal-trigger').leanModal({
    ready: function () {
        $('#firstTab').click();
    }
});

fiddle: https://jsfiddle.net/qj0r84dr/

Both options will allow you to retain the animation of the underline moving from tab to tab.