AngularJS材质：自定义组件中没有滚动条

Question

Recently I discovered AngularJS Material framework and now I'm trying to use it. 最近，我发现了AngularJS Material框架，现在我正在尝试使用它。 For the 1st time I found no similar thread so I dare to ask. 我第一次没有找到类似的主题，所以我敢问。 When I add my custom components like this: 当我像这样添加自定义组件时：

<body ng-app="katalogApp" layout="column">
    <katalog></katalog>
</body>

...everything works pretty well besides flex scrolling. ...除了弹性滚动外，其他所有功能都非常有效。 After pasting the component template directly in App: 将组件模板直接粘贴到App中后：

<body ng-app="katalogApp" layout="column">
    <div layout="row" flex>
        <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp" layout="column">
    it has a scrollbar
        </md-sidenav>
        <md-content flex>
            content
        </md-content>
    </div>
</body>

...it works but that's dirty as hell. ...虽然可以，但是很脏。 If I add css: 如果我添加CSS：

md-sidenav {position:fixed!important}

to the container - there's a scrollbar but the content is misplaced. 到容器-有一个滚动条，但是内容放错了位置。 I would be grateful if someone knows how to deal with it. 如果有人知道如何处理，我将不胜感激。

Here's a plunker 这是一个小矮人

Answer 1

Instead of positioning md-sidenav tag, what you can do is give height to sidenav so it'll have scrollbar & accordingly have height to main content also. 代替放置md-sidenav标签，您可以做的是给sidenav赋予高度，使其具有滚动条，并相应地使主要内容具有高度。 Now you can add new class to md-sidenav with css as: 现在，您可以使用CSS将新类添加到md-sidenav中，如下所示：

.leftSideNav {
  height: 100vh;
}
.content {
  height: 100vh;
  padding: 7px;
}

Where I've added these classes to md-sidenav & md-content respectively: 我分别将这些类添加到md-sidenav和md-content的位置：

<body ng-app="katalogApp" layout="column">
    <div layout="row" flex>
        <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp leftSideNav" layout="column">
    it has a scrollbar
        </md-sidenav>
        <md-content flex class="content">
            content
        </md-content>
    </div>
</body>

Plunker Example 柱塞示例

AngularJS材质：自定义组件中没有滚动条

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-01 19:51:16

AngularJS材质：自定义组件中没有滚动条

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-01 19:51:16

解决方案1
0 已采纳 2018-07-01 19:51:16