Menu
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't find a way to do that. There are other similar issues reported (e.g. here) but they seem to be old and supposedly fixed. I am working with angular-material 0.10.0
Plunker here
943
You can do that with a little CSS.
Add a class to the elements with position:fixed !important
Don't forget to use !important . This will override the default position property for tabs and toolbar
131
This should be helpfull 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
