Search code examples
htmlcsstabsmaterialize

Materialize active tab not working in Modal

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.

Solution

  • 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.