Question

我正在尝试角度材质，特别是flex布局属性。

我有一个包含带有行布局的子div的列布局，其中包含另外两个子项，其中一个具有flex。

我想要的是第一个子项目滚动，而不是第二个。

<div ng-app="app" 
     layout="column" class="demo" >

  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <md-content>
  <div layout="row">
    <md-card  flex>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
    </md-card>
    <div>dgfdgfdg</div>
  </div>
  </md-content>
</div>

当前实施 - http://codepen.io/anon/pen/merXpr

我注意到md-content指令可用于滚动内容，我试图通过环绕包含我的两个子项的包含div来尝试，但当然这只会使整个内容区域滚动。

有没有办法让我只能滚动的md卡项目？我确实尝试用md-content包装md-card，但这并没有区别。

由于

Answer 1

据我所知，您只想要滚动卡片，而不是页面上的其他内容。我在不同的环境中做了几次，但总的来说，这是一个简单的与css相关的修复。

您希望将css属性overflow: auto作为属性添加到您可能希望在其内部滚动的任何内容。据我所知，没有办法严格使用Angular Material指令，属性或类。但是，只需在相关元素中添加自定义css类并在css中定义它就可以了。

下面，我将您修改后的代码从codepen粘贴到一个代码段中，然后是修改后的codepen url。

(function() {
  'use strict';

  angular
    .module('app', ['ngMaterial']);
})();

.demo {
  width: 600px;
  height: 300px;
  background-color: #cccccc;
  margin-top: 40px;
  margin-left: 0px;
}
.scroll-this {
  overflow: auto;
}

<link href="http://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-aria.js"></script>
<script src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="app" layout="column" class="demo">
  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <div layout="row">

    <md-card class="scroll-this" flex>
      Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>

    </md-card>
    <div>Something here</div>
  </div>
</div>

http://codepen.io/anon/pen/bpdXeB

角度材质 - 可滚动的flex子项

1 个答案: