CODEWITHSUNDEEP
javascripthtmlcssangularjsangular-material
Prateek Choudhury
Prateek Choudhury

Reputation: 302

Angular material tabs not working (md-tabs)

Using Angular material to open up a dialog which uses tab in the content body ( https://material.angularjs.org/latest/demo/dialog ). Now the dialog is popping up but I can on see the content of first tab and do not see the tab options to toggle from one tab to another. Adding html snippet:

    <md-dialog-content style="max-width:800px;max-height:810px; ">
      <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
          <md-content class="md-padding">
            <h1 class="md-display-2">Tab One</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
          </md-content>
        </md-tab>
        <md-tab label="three">
          <md-content class="md-padding">
            <h1 class="md-display-2">Tab Three</h1>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
          </md-content>
        </md-tab>
      </md-tabs>
    </md-dialog-content>

Upvotes: 2

Views: 3610

Answers (2)

sosostris
sosostris

Reputation: 73

I had the same problem and after trying out various ways, this finally worked:

Include the following css code in your css file:

md-pagination-wrapper {
    width:500px !important;
}

Upvotes: 0

Daniel L&#243;pez
Daniel L&#243;pez

Reputation: 716

Angular Material isn't calculating width well. This happened to me and I fixed it adding md-stretch-tabs="always" to md-tabs and removing flex on parent container:

<div>
    <md-content>
        <md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom>
            <md-tab label="three">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab Three</h1>
                    <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum.</p>
                </md-content>
            </md-tab>
        </md-tabs>
   </md-content>
</div>

Doing this change makes AngularJS calculate well the resize of tabs. Be careful and do not use flex on md-tabs container because it makes it fail on some scenarios.

Upvotes: 2

Related Questions