【问题标题】:Angular Material, list in sidebar not scrollableAngular Material,侧边栏中的列表不可滚动
【发布时间】: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


【解决方案1】:

它应该有一个固定的高度并设置溢出来滚动。

【讨论】:

  • 固定高度,但是多少?
  • 取决于您的布局。例如 300 像素。
  • 记得根据屏幕大小放css?
  • 如果我想要 100% 怎​​么办?
猜你喜欢
  • 2020-06-20
  • 2016-03-01
  • 2015-12-01
  • 1970-01-01
  • 2020-07-26
  • 1970-01-01
  • 1970-01-01
  • 2016-08-07
  • 2015-09-23
相关资源
最近更新 更多