All geek questions in one place

Angular material design md-tab scroll content

This may be a simple problem, but I'm new to this ...

I am trying to have an md-tabs element that displays full screen and has only scrollable tab contents. Here is an example on jsFiddle

Any ideas? THX!

+3
source share
3 answers

It seems that it was a bug in 0.8.3, which is now fixed in master (commit: 74601d0)

0
source

Try the following:

 <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 contents of the internal tabs (md-tab) scrollable.

+2
source

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

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

Your container must be fixed. In addition, you can play with overflow. Read this one for more information.

thanks

0
source

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

More articles:


All Articles