除非设置了内容高度,否则不会显示 Angular mat-sidenav
Posted
技术标签:
【中文标题】除非设置了内容高度,否则不会显示 Angular mat-sidenav【英文标题】:Angular mat-sidenav is not showing unless content height is set 【发布时间】:2021-07-01 09:43:48 【问题描述】:试图让素材侧边栏打开两个多小时,发现如果 sidenav-content 上没有设置高度,那么侧边栏根本没有打开。 我的目标是让侧边栏的全高始终在左侧,而不是与内容的高度相同。 40vh 的现状:SideNav not full height
有人知道为什么会这样吗,或者我的 sidenav 内容应该与现在不同吗?
<app-header (toggleSidenav)="navigationSidenav.toggle()"></app-header>
<mat-sidenav-container autosize="true">
<mat-sidenav #navigationSidenav [fixedInViewport]="false">
<mat-nav-list>
<a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
<a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
<a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-list-item [routerLink]="'/activities'"> Activities </a>
<a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
<a mat-list-item (click)="navigationSidenav.toggle()">Close</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div style="height: 40vh;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
应用标题看起来像这样
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
【问题讨论】:
【参考方案1】:官方文档:
默认情况下,
<mat-sidenav>
将适合其内容的大小。
因此,您应该明确地告诉组件所需的高度是多少。
【讨论】:
以上是关于除非设置了内容高度,否则不会显示 Angular mat-sidenav的主要内容,如果未能解决你的问题,请参考以下文章
除非调整大小,否则框架不显示组件 (JAVA AWT)。无法修复
除非另有说明,否则 Bootstrap 中的 col 高度不应该只覆盖内容吗?