角材料侧边栏高度问题

Question

我正在使用角度材质 UI (v10.2.6)。我在一个组件中有一个侧栏和一个材料表。当用户单击按钮时，它将打开侧栏以显示表格的过滤器选项。一切正常，但我注意到侧边栏的高度是由表格高度设置的，而不是侧边栏的内容。如果用户使用分页器在表格上显示 5 行，则侧边栏设置为表格的高度，并且侧边栏的内容会溢出滚动条。我尝试设置 fixedInViewport 但这是应用程序根（路由器出口）上现有侧栏内的一个组件。当我尝试它时，侧栏的顶部消失在主应用程序工具栏下。任何帮助表示赞赏。

这是我的html：

<h2>Assets</h2>
<mat-sidenav-container>
  <mat-sidenav #drawer class="filter-sidenav" mode="side">
    <h3>Filters</h3>
    <mat-divider></mat-divider>
    <mat-toolbar class="button-tool-bar">
      <button mat-raised-button color="primary" (click)="applyFilterOnClick()">Apply</button>
      <span class="spacer"></span>
      <button mat-raised-button (click)="clearFilterOnClick()">Clear</button>
    </mat-toolbar>
    <h4>Districts <span>{{ districtList.selectedOptions.selected.length }}</span></h4>
    <div class="filter-sidenav-list-container">
      <mat-selection-list #districtList>
        <mat-list-option color="primary" value="district.Id" *ngFor="let district of districts">
          {{district.DistrictName}}
        </mat-list-option>
      </mat-selection-list>
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="button-tool-bar">
      <button type="button" title="Main Menu" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
        <mat-icon *ngIf="!drawer.opened" aria-label="Open menu">menu_open</mat-icon>
        <mat-icon *ngIf="drawer.opened" aria-label="Close menu">close</mat-icon>
      </button>
      <mat-form-field class="filter-mat-field">
        <input matInput #searchInput placeholder="Search">
      </mat-form-field>
      <span class="spacer"></span>
      <a mat-raised-button (click)="importOnClick()" *ngIf="currentEmployee.RoleId == roleEnum.Admin">Import Assets</a>
      <a mat-raised-button (click)="addOnClick()" *ngIf="currentEmployee.RoleId == roleEnum.Admin">Add an Asset</a>
    </mat-toolbar>
    <table mat-table class="full-width-table" [dataSource]="dataSource" matSort matSortActive="AssetNumber"
      matSortDirection="asc" matSortDisableClear aria-label="Elements">
      <ng-container matColumnDef="Id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
        <td mat-cell *matCellDef="let row">{{row.Id}}</td>
      </ng-container>

      <ng-container matColumnDef="AssetNumber">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Asset Number</th>
        <td mat-cell *matCellDef="let row">{{row.AssetNumber}}</td>
      </ng-container>

      <ng-container matColumnDef="AssetType">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Asset Type</th>
        <td mat-cell *matCellDef="let row">{{ row.AssetTypeName }}</td>
      </ng-container>

      <ng-container matColumnDef="AssetStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Asset Status</th>
        <td mat-cell *matCellDef="let row">{{ row.AssetStatusName }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"
        [ngClass]="{ 'selected': row === selectedRow }"></tr>
    </table>
    <div *ngIf="isLoading" class="loading-spinner">
      <mat-progress-spinner diameter=50 color="primary" mode="indeterminate"></mat-progress-spinner>
    </div>

    <mat-paginator #paginator showFirstLastButtons [length]="dataSource?.assetCount" [pageSize]="pageSize"
      [pageSizeOptions]="[5, 10, 25, 50]">
    </mat-paginator>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

你必须看看溢出属性。

overflow CSS 速记属性设置元素溢出的期望行为 - 即当元素的内容太大而无法适应其块格式上下文时 - 在两个方向上。

Read more

Answer 2

我想我找到了解决方案。我必须这样设置侧边栏容器的高度：

mat-sidenav-container {
 height: 100vh;
}