如何根据内容设置垫子抽屉容器、垫子抽屉和垫子抽屉内容高度响应



默认情况下,垫抽屉容器/垫侧导航容器垫子抽屉/垫侧航行器高度基于床垫抽屉内容/垫子侧导航内容,但我想根据垫子抽屉本身的内容设置其高度,并根据垫子抽屉垫抽屉内容设置床垫抽屉容器高度,以较大者为准。我的垫子抽屉内容将是基于用户输入的动态内容,有没有任何直接的方法可以在有角度的材料中做到这一点?

下面的链接是一个演示应用程序,以提高清晰度。

i( 当我使用高度:100vh时,我会用滚动条获得全视图高度(这并不有趣(。

ii(如果我使用主机:垫子抽屉容器:100px,它不接受合适的内容或100%作为值,也不接受最大高度:500px。

iii(已尝试{provide:MAT_DRAWER_DEFAULT_AUTOSIZE,useValue:{AUTOSIZE:true}},但当垫抽屉内容为空时,垫抽屉不可见,即使垫抽屉中有项目列表。

https://stackblitz.com/edit/angular-mat-drawer-s1vgwr?

从下面开始!

<mat-drawer fxFlex #drawer mode="side"
style="display: inline-table; overflow: auto; position: fixed; margin-top: 75px">

不断调整,直到满足您的要求。最简单的测试方法是使用浏览器开发工具并从中调整css。这就是我在一个项目中所遵循的,我也想了解其他人的想法。

最新更新