Angular Material md-tabs: setting md-dynamic-height causing the tabs to scroll instead of the content

Question

I'm trying out angular material and using the md-tabs but some reason when applying md-dynamic-height the tabs plus content if the content exceeds the length of the screen. I just what the content to scroll can't figure out what I'm doing wrong. Here's an example of what I am doing.

<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<!--First Tab-->
<md-tab md-dynamic-height label="First INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img  src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>
<!--Second Tab-->
<md-tab md-dynamic-height label="Second INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img  src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>
<!--Third Tab-->
<md-tab md-dynamic-height label="Third INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>

check this http://stackoverflow.com/questions/35525497/scrollable-content-elements-with-angular-material-dynamic-height-tabs — kTn, Mar 09 '16 at 04:45
I can't get this to work for me. The fiddler link works fine. When I try to apply to what I'm doing it doesn't work. — Joseph Freeman, Mar 09 '16 at 18:53

score 3 · Answer 1 · edited May 18 '17 at 15:45

Sample layout :

<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
    <md-tab label="1">
        <md-content style="height:100%">
         tab content here
        </md-content>
    </md-tab>
    <md-tab label="2">
        <md-content style="height:100%">
         tab content here
        </md-content>
    </md-tab>
    <md-tab label="3">
        <md-content style="height:100%">
         tab content here
        </md-content>
    </md-tab>
</md-tabs>

score 2 · Answer 2 · edited May 02 '17 at 16:20

2

Try md-dynamic-height="" in md tabs

<md-tabs md-dynamic-height="">

edited May 02 '17 at 16:20

Matthew Verstraete

6,335
22
67
123

answered May 02 '17 at 16:02

Sid55813

113
1
7

Angular Material md-tabs: setting md-dynamic-height causing the tabs to scroll instead of the content

2 Answers2