CODEWITHSUNDEEP
javascriptangularjsangular-material
kpg
kpg

Reputation: 7966

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'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

Upvotes: 6

Views: 7577

Answers (3)

el_quick
el_quick

Reputation: 4756

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>

Upvotes: 1

Umair Hamid
Umair Hamid

Reputation: 3557

You can use "md-subheader" as a 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 bad or good approach but I couldn't found any alternative way in angular material 1.1.0 (RC4).

Upvotes: 0

Sourabh Agrawal
Sourabh Agrawal

Reputation: 856

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

Upvotes: 6

Related Questions