...">
All geek questions in one place

How to fix md-tabs and md-toolbar and scroll md-content?

I am trying to do something like this:

<md-tabs> <md-tab label="First Tab"> <md-toolbar></md-toolbar> <md-content> <md-list> <md-list-item ng-repeat="item in items"> <md-item-content> <div> {{item}} </div> </md-item-content> </md-list-item> </md-list> </md-content> </md-tab> <md-tab label="Second tab"> <md-list flex> <md-list-item ng-repeat="item in items"> <md-item-content>{{item}}</md-item-content> </md-list-item> </md-list> </md-tab> </md-tabs>

I want the tabs and toolbar to be fixed (always visible) and the contents of the list to scroll. I can not find a way to do this. There are other similar problems (for example, here ), but they seem old and supposedly fixed. I work with angular-material 0.10.0

Plunker here

+6
source share
3 answers

You can do this with a little CSS.

 Add a class to the elements with position:fixed !important

Do not forget to use! important. This will override the default position property for tabs and toolbars.

+6
source

This should be useful for you.

 <body layout="column"> <md-toolbar> <div class="md-toolbar-tools"> <h2> <span>Toolbar</span> </h2> </div> </md-toolbar> <md-tabs md-stretch-tabs> <md-tab> <md-tab-label> Tab 1 </md-tab-label> </md-tab> <md-tab> <md-tab-label> Tab 2 </md-tab-label> </md-tab> </md-tabs> <md-content flex> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> Hello world </md-content> </body>
+1
source

You can use " md-subheader " as the parent container. Its default behavior is sticky. Its documentation is https://material.angularjs.org/latest/api/directive/mdSubheader

I'm not sure if this is a good or bad approach, but I could not find an alternative way in angular material 1.1.0 (RC4).

0
source

Source: https://habr.com/ru/post/989523/

More articles:


All Articles