【发布时间】:2016-07-30 01:47:23
【问题描述】:
我正在使用 AngularJS,Angular Material
我想在sidebar(左)中有一个list,我成功了,但我不知道如何将其设置为可滚动。
这是我的代码:
sidebar.html
<div ng-controller="SideBarCtrl as sideBarCtrl">
<md-sidenav class="site-sidenav md-sidenav-left"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar class="md-whiteframe-z1">
<div flex>
<md-content>
<md-list>
<md-list-item layout-padding class="md-3-line" ng-repeat="day in sideBarCtrl.week" ng-click="null">
<div class="md-list-item-text" layout="column">
<h3>{{ day }}</h3>
</div>
<md-divider ></md-divider>
</md-list-item>
</md-list>
</md-content>
</div>
</md-toolbar>
</md-sidenav>
</div>
Router.js
.when('/', {
templateUrl: 'views/sidebar.html',
controller: 'SideBarCtrl',
controllerAs: 'sideBarCtrl'
})
main.css
body {
overflow: hidden;
}
我这样设置我的 CSS,这样我的主页就不会滚动。 (但即使没有这个溢出,它也不起作用)
你有什么想法吗?
编辑 1:
如果我添加这样的高度,它几乎可以工作(=列表 scolls,但它被裁剪了 100 像素):
<md-list style="overflow: scroll; height: 100px";>
...
</md-list>
但是当我尝试执行例如height: 100% 时,它不起作用,甚至无法滚动。
【问题讨论】:
-
尝试添加高度和溢出:滚动;
标签: javascript html css angularjs material-design