Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make md Content scrollable in Angular material Design

I am using ui-view in md-content to display a list but its getting overflow i want list in md-content should be scrollable here is my index.html

<div layout-lt-lg="row" class="screen-bg">
    <div flex-lt-lg="100">

        <!--header-->
        <md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
            <div class="status-bar-bg"></div>
            <div class="md-toolbar-tools">

                <md-button class="md-icon-button" aria-label="Settings">
                    <!--<md-icon md-svg-icon="app/images/back1.svg"></md-icon>-->
                </md-button>
                <h2>
                    <span></span>
                </h2>
                <span flex=""></span>
                <md-button class="md-icon-button" aria-label="Favorite">
                    <!--<md-icon md-svg-icon="app/images/a.svg"></md-icon>-->
                </md-button>

            </div>
        </md-toolbar>

        <!--content-->
        <div>
            <md-content>

                <ui-view></ui-view>
            </md-content>
        </div>
    </div>
</div>

here is my template

 <md-list flex>
        <md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
          <div class="md-list-item-text" layout="column" >
            <h3>{{broadCast.name}}</h3>
            <h3>{{broadCast.phone}}</h3>
          </div>
        </md-list-item>
 </md-list>
like image 774
Azhar Khan Avatar asked Mar 12 '23 11:03

Azhar Khan


1 Answers

To make the list scrollable:

  1. Add a class to md-list.

    <md-list class="make-scrollable" flex>
      <md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
        <div class="md-list-item-text" layout="column">
          <h3>{{broadCast.name}}</h3>
          <h3>{{broadCast.phone}}</h3>
        </div>
      </md-list-item>
    </md-list>
    
  2. Style the md-list in your css file like so:

    md-list.make-scrollable {
        height: 600px; //Or any other height you wish
        overflow-y: scroll;
    }
    

That should make the overflowing content scrollable

like image 133
Bala Abhinav Avatar answered Mar 15 '23 23:03

Bala Abhinav