html - 角材料制作粘性页眉和页脚

问题描述

我将 angular6 与 Angular 材料设计模板一起使用。目前，我的结果如下，

目前，我有粘性页眉和页脚，但滚动数据集对用户不友好。 issue-data-html是我的 HTML 文件，

<div class="mainDiv">
  <div class="mat-elevation-z8 issueDataCard">
    <div style="position: relative; z-index: 1; " class="app-list-header" fxLayout="row" fxLayoutAlign="start baseline"
      fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
      <div fxLayout="column" fxLayoutAlign="start baseline" fxLayoutGap="24px" fxFlex="grow" fxLayout.gt-xs="row">
        <div class="app-list-name">
          <h3>
            Issue Statuses
          </h3>
        </div>
        <div class="vl"></div>
        <!--Search-->
        <mat-form-field class="app-filter-input" floatPlaceholder="never" fxFlex>
          <mat-icon class="app-filter-input-icon" matPrefix>search</mat-icon>
          <input matInput #filter placeholder="Search&hellip;" (keyup)="applyFilter($event.target.value)">
        </mat-form-field>
      </div>

      <div fxFlex="none">
        <button mat-mini-fab style="background-color: #281c7b;" *ngIf="showAddIssueDataIcon"
          (click)="addIssueData(null)" matTooltip="Add Issue Data">
          <mat-icon>add</mat-icon>
        </button>
      </div>

      <button class="app-column-filter" type="button" mat-icon-button [matMenuTriggerFor]="columnFilter">
        <mat-icon style="font-size: 130%; color:#929292" matTooltip="Configure Table">settings</mat-icon>
      </button>
      &nbsp;&nbsp;
      <mat-menu #columnFilter="matMenu" yPosition="below" xPosition="before">
        <button class="checkbox-item mat-menu-item" *ngFor="let column of displayedColumns"
          (click)="toggleColumnVisibility(column, $event)">
          <mat-checkbox [(ngModel)]="column.visible" (change)="columnFilterCheckboxClick($event)" class="checkbox"
            #checkbox (click)="$event.stopPropagation()">
            {{ column.name }}
          </mat-checkbox>
        </button>
      </mat-menu>
      <ng-content select=".actions"></ng-content>
    </div>

    <!--table-->
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
      <!-- issueStatus Column -->
      <ng-container matColumnDef="issueStatus">
        <th mat-sort-header="name" mat-header-cell *matHeaderCellDef>ISSUE STATUS</th>
        <td mat-cell *matCellDef="let element">
          {{element.name}}
        </td>
      </ng-container>

      <!-- showInBacklog Column -->
      <ng-container matColumnDef="showInBacklog">
        <th mat-sort-header="backlog" mat-header-cell *matHeaderCellDef>SHOW IN BACKLOG</th>
        <td mat-cell *matCellDef="let element" style="text-transform: uppercase">
          {{element.backlog}}
        </td>
      </ng-container>

      <!-- Status Column -->
      <ng-container matColumnDef="status">
        <th mat-sort-header="status" mat-header-cell *matHeaderCellDef>STATUS</th>
        <td mat-cell *matCellDef="let element" style="text-transform: uppercase">
          {{element.status}}
        </td>
      </ng-container>

      <!-- Actions Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef class="action-cell" style="padding-right: 40px">ACTIONS</th>
        <td mat-cell *matCellDef="let element; let i = index" class="action-cell">
          <button mat-icon-button *ngIf="showAddIssueDataIcon" (click)="editIssueData(element)">
            <mat-icon class="iconStyle" matTooltip="Edit Issue Data">edit</mat-icon>
          </button>
          &nbsp;&nbsp;
          <!--&nbsp;&nbsp;-->
          <a style="cursor: pointer" *ngIf="showEditIssue">
            <i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu"
              matTooltip="More actions">more_vert</i></a>
          <mat-menu #selectMenu="matMenu">
            <button mat-menu-item *ngIf="element.status === 'INACTIVE'"
              (click)="onClickEditStatus(element , true,i)">Make Active</button>
            <button mat-menu-item *ngIf="element.status === 'ACTIVE'"
              (click)="onClickEditStatus(element , false,i)">Make Inactive</button>
            <button mat-menu-item (click)="deleteIssueData(element,i)">Delete</button>
          </mat-menu>
        </td>
      </ng-container>


      <tr mat-header-row *matHeaderRowDef="visibleColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: visibleColumns;"
        [ngClass]="{ hovered: row.hovered, highlighted: row.highlighted }" (click)="row.highlighted = !row.highlighted"
        (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></tr>
    </table>
    <mat-paginator [pageSize]="savedPageSize" (page)="columnFilterCheckboxClick($event)"
      [pageSizeOptions]="[5, 10, 20, 100]" showFirstLastButtons></mat-paginator>
  </div>

</div>

我的css文件如下，

   .issueDataCard{
    margin: 20px;
  }
  /* Structure */
  table {
    width: 100%;
  }
  .mat-sort-header-container {
    align-items: center;
  }
  .mat-form-field {
    font-size: 14px;
    width: 98%;
    margin: 10px;
  }
  @import "var";

  .app-list-name {
    color: $color;
    border-right: 1px solid $theme-divider;
    font-size: 20px;
    line-height: 0px;
    font-weight: 500;
    padding-right: $spacing;
    padding-left: $spacing;
    @include media-xs {
      border-right: none;
    }
  }

  .iconStyle{
    color:#281c7b;
    cursor: pointer;
  }
  .slideToggleStyle{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .divMarginStyle{
    margin-bottom: 20px;
    margin-right: 20px;
  }


  .dataStyle{
    text-align: center;
  }
  .dateStyle{
    color:#5D6C7F;
    font-size: 10px;
  }
  .actions{
    padding-right: 30px;
  }

  .action-cell{
    text-align: right;
  }

  .mat-cell{
    align-items: center;
  }

  .mat-elevation-z8 {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    width: 100%;
    margin-bottom: 1.5%;
    overflow: auto;
  }

我不知道如何根据需要更改这些 CSS 类，任何帮助都会被极大地接受。

标签： htmlcssuiscrollviewangular-materialangular6

html - 角材料制作粘性页眉和页脚

问题描述

解决方案

推荐阅读