如何在 Angular material 设计中使 md 内容可滚动

Question

我在 md-content 中使用 ui-view 来显示列表但是它越来越溢出我希望 md-content 中的列表应该是可滚动的这是我的 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>

这是我的模板

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

Answer 1

您使用了太多不必要的容器元素。

<div layout-lt-lg="row" flex-lt-lg="100" class="screen-bg">
    <!--header-->
    <md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
        <div class="status-bar-bg"></div> //desired controller buttons
        <div class="md-toolbar-tools"></div> //desired controller buttons
    </md-toolbar>

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

这是一个工作示例。有一些变化，但基本结构几乎相同。

Answer 2

要使列表可滚动：

将 class 添加到 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>

在您的 css 文件中设置 md-list 的样式如下：

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

这应该使溢出的内容可以滚动

如何在 Angular material 设计中使 md 内容可滚动

How to make md Content scrollable in Angular material Design

html

css

angularjs

material-design

angular-material