Angular material design md-tab scroll content

Question

This might be a simple issue, but I'm new to this...

I am trying to have an md-tabs element that takes the entire screen, and have only the tabs' content scroll. Here is an example on jsFiddle

Any ideas? thx!

score 2 · Answer 1 · answered Jan 25 '17 at 12:38

Try this:

<body ng-cloak layout="column" ng-controller="AppController as app">
    <md-toolbar layout="row" class="md-toolbar-tools">
        <h1>Welcome!</h1>
    </md-toolbar>
    <div layout="column" flex>
        <md-tabs md-stretch-tabs="always" flex>
            <md-tab label="Tab1">
                add our larger-than-life content here
            </md-tab>
            <md-tab label="Tab2">
            </md-tab>
       </md-tabs>
    </div>
</body>

Adding the flex attribute to md-tabs will make the content of the inner tabs (md-tab) scrollable.

score 1 · Answer 2 · answered Mar 26 '15 at 10:34

1

Try to add this style to your div element inside md-tab :

div{    
  height: 100px; 
  overflow-y: scroll;
}

Your container must be a fixed size. Also, you can play with overflow property. Read this for more information.

Thanks

answered Mar 26 '15 at 10:34

flowr

79
5

1

Yeah, but I want the div to take the entire height of the tab, not only X pixels... – ValYouW Mar 29 '15 at 07:34

score 0 · Accepted Answer · answered Mar 29 '15 at 09:33

0

Seems like it was a bug in 0.8.3 that is fixed now in master (commit: 74601d0)

answered Mar 29 '15 at 09:33

ValYouW

669
2
9
20

Angular material design md-tab scroll content

3 Answers3

Linked