【问题标题】:Angular mat-sidenav is not showing unless content height is set除非设置了内容高度,否则不会显示 Angular mat-sidenav
【发布时间】: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>

【问题讨论】:

    标签: css angular angular-material mat-sidenav


    【解决方案1】:

    官方文档:

    默认情况下,&lt;mat-sidenav&gt; 将适合其内容的大小。

    因此,您应该明确地告诉组件所需的高度是多少。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-02-23
      • 2019-05-07
      • 2011-03-17
      • 2019-08-08
      • 2013-07-15
      • 2018-12-08
      • 1970-01-01
      • 2014-04-10
      相关资源
      最近更新 更多