gpt4 book ai didi

css - AngularJS Material : no scrollbar in custom components

转载 作者:行者123 更新时间:2023-11-28 01:28:24 26 4
gpt4 key购买 nike

最近我发现了 AngularJS Material 框架,现在我正在尝试使用它。第一次我没有找到类似的帖子所以我敢问。当我像这样添加自定义组件时:

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

...除了 flex 滚动之外,一切都很好。 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>

...它可以工作,但那太脏了。如果我添加 css:

md-sidenav {position:fixed!important}

到容器 - 有一个滚动条,但内容错位了。如果有人知道如何处理它,我将不胜感激。

Here's a plunker

最佳答案

而不是定位 md-sidenav 标签,你可以做的是给 sidenav 高度,这样它就会有滚动条,相应地也有主要内容的高度。现在您可以使用 css 向 md-sidenav 添加新类:

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

我将这些类分别添加到 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

关于css - AngularJS Material : no scrollbar in custom components,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51123178/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com