CODEWITHSUNDEEP
angularjsangular-material
Jymbo
Jymbo

Reputation: 296

How to make md-tab-body scrollable with sticky md-tab-label

I am trying to make just angular material md-tab-body scrollable with a sticky md-tab-label. At the moment I wrapped md-tabs in md-content but this leads to scrollable md-tab-labels, as well... Did anybody already achieve this?

<md-content>
 <md-tabs>
    <md-tab>
        <md-tab-label>
            <p>Sticky Tab A</p>
        </md-tab-label>
        <md-tab-body>
            <div>Scrollable Content of tab A</div>
        </md-tab-body>
    </md-tab>
    <md-tab>
        <md-tab-label>
            <p>Sticky Tab B</p>
        </md-tab-label>
        <md-tab-body>
            <div>Scrollable Content of tab B</div>
        </md-tab-body>
    </md-tab>
 </md-tabs>
</md-content>

I made a plnkr

Upvotes: 1

Views: 1129

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222552

Problem is with your material version, try to use the latest versions ,it works fine.

<script src="//code.angularjs.org/1.6.1/angular.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-aria.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-animate.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css" />

DEMO

Upvotes: 0

Related Questions