如何让md-content在表单中滚动?

时间:2016-06-06 11:48:27

标签: css angularjs angular-material

以下是我的应用程序中的屏幕布局。我无法获取要滚动的md内容。而是整个页面滚动。有什么建议吗?

`

<form name="myForm">
  <!-- Header Area-->
  <div>
   <label>Header</label>
   <md-button type="submit" ng-disabled="myForm.$invalid">Submit</md-button>
  </div>
  <!-- Content Area-->
  <md-content>
    <!-- Form fields-->
  </md-content>
</form>

`

我尝试将表单的溢出设置为隐藏,并将md-content的溢出显式设置为auto,但这没有帮助。

下面是我创建的plunker,它演示整个页面滚动而不是md-content。

http://plnkr.co/edit/YWr30m2sTci7rdIbFFzM?p=preview

2 个答案:

答案 0 :(得分:4)

将表单元素更改为:<form name="myForm" flex layout="column" style="overflow: auto; height: 100%;">

似乎可以解决问题。

http://plnkr.co/edit/pKwFGmkJmhifdyqCg9aU?p=preview

答案 1 :(得分:1)

Mike Feltman的解决方案可行,但您真正需要的只是将layout属性(在您的情况下为layout="column")应用于form

检查一下: http://plnkr.co/edit/BCtIw951qSnsHbyU69a6?p=preview