CODEWITHSUNDEEP
csstabsmodal-dialogmaterialize
Combinu
Combinu

Reputation: 907

Materialize tabs in modal not showing content

I am creating a modal using materialize and in it i am trying to place swipe-able tabs.

The strange thing that is happening is that tabs header appears but the tab content does not appear at all. How can i fix this?

Here is my fiddle jsfiddle and let me tell you that this is all code copied from the documentation

<div id="profession-registration-modal" class="modal">
<div class="modal-content">
    <h4>Register your profession</h4>

    <div class="row">
        <div class="col s12">
            <ul id="tabs-swipe-demo" class="tabs">
                <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
                <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
                <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
            </ul>
            <div id="test-swipe-1" class="col s12 blue">Test 1</div>
            <div id="test-swipe-2" class="col s12 red">Test 2</div>
            <div id="test-swipe-3" class="col s12 green">Test 3</div>
        </div>
    </div>

</div>
<div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>

Upvotes: 1

Views: 663

Answers (1)

Bahman Parsa Manesh
Bahman Parsa Manesh

Reputation: 2370

The height of tab content sets height: 0px by default. You can set it in your css :

div.tabs-content.carousel.carousel-slider {
  height: 200px !important;
}

jsfiddle

Upvotes: 1

Related Questions