angular - 如何使用 Angular Material 柔性布局避免 Angular 水平和垂直滚动

Question

我正在使用 Angular Material 和弹性布局来处理 Angular 2。我已经实现了 ma​​t-sidenav 并采用了一些 ma​​t-form-field 并且还实现了 ma​​t-table

我只为 ma​​t-table 组件指定了最大高度，但是除了 ma​​t-table< 的垂直滚动条之外，我还得到了页面的水平和垂直滚动条/strong>

下图是我的页面。

当进入 xs 视口(viewport)时，我得到多个滚动条，如下所示

谁能帮我解决如何避免这些滚动条......？

请访问我的示例代码here

.html文件

<mat-sidenav-container>
    <mat-sidenav #sidenav>
        <div class="sidenav-header">
            <mat-nav-list>

                <h3 mat-subheader>Status At A Glance</h3>
                <a mat-list-item routerLink='' routerLinkActive="active">Not Started</a>
                <a mat-list-item routerLink='' routerLinkActive="active">Incomplete</a>
                <a mat-list-item routerLink='' routerLinkActive="active">Complete</a>
                <mat-divider></mat-divider>
                <a mat-list-item routerLink='' routerLinkActive="active">Total</a>
                <mat-divider></mat-divider>

                <mat-form-field floatPlaceholder="never" style="width:150px; height:15px; margin-left:10px; font-size:12px; font-family: Verdana,Sans-Serif;">
                    <mat-select placeholder=" Select Department" [(value)]="selecteddept" style="width:150px;">
                        <input class="input1" matInput type="text">
                        <mat-option *ngFor="let Department of departments " [value]="Department.value" style="font-size:12px; font-family: Verdana,Sans-Serif; margin:-5px 0 -5px 0;">
                            {{Department.viewValue }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-divider></mat-divider>
                <h3 mat-subheader>Space Administration </h3>
                <a mat-list-item routerLink='/Home/SurveyTools/RemoveRoomFromList' routerLinkActive="active">Remove Room From List</a>
                <a mat-list-item routerLink='/Home/SurveyTools/RequestRoom' routerLinkActive="active">Request A Room </a>
                <a mat-list-item routerLink='/Home/SurveyTools/SplitRoomMultiplePi' routerLinkActive="active">Split Room - Multiple PI's</a>
                <a mat-list-item routerLink='/SpaceAdmin/BlockCode/BlockCode' routerLinkActive="active">Block Code</a>
                <a mat-list-item>Lab Support Rooms</a>
                <mat-divider></mat-divider>

                <h3 mat-subheader>Survey Tools</h3>
                <a mat-list-item>Create New Lab Cluster</a>
                <a mat-list-item>Blank Survey Form </a>
                <a mat-list-item>Common Task</a>
                <a mat-list-item>Survey Instruction</a>
                <a mat-list-item>User Guide</a>
                <mat-divider></mat-divider>

            </mat-nav-list>

        </div>
    </mat-sidenav>

    <div [ngStyle]="{'display' : (screenWidth > 840) ? 'none' : 'block'}">
        <div fxLayout="row" fxLayoutAlign=" start stretch">
            <a (click)="sidenav.open()">
                <mat-icon>menu</mat-icon>
            </a>&emsp;
            <h1> SPACE SURVEY </h1>
        </div>

        <p style="margin:-5px; text-align:center;"> &emsp; If you need help, Please <strong><a href="#visit our detailed instruction">visit our detailed instruction </a></strong>          on how to use this site.</p>

    </div>
    <div>



        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center">

            <mat-form-field floatPlaceholder="never">
                <mat-select placeholder=" Department">
                    <input class="input1" matInput type="text">
                    <mat-option *ngFor="let Department of department   " [value]="Department.value">
                        {{Department.viewValue }}
                    </mat-option>
                </mat-select>
            </mat-form-field><br/>

            <mat-form-field floatPlaceholder="never">
                <mat-select placeholder="Building ">
                    <input class="input1" matInput type="text">
                    <mat-option *ngFor="let Building of buildings  " [value]="Building.value">
                        {{ Building.viewValue }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div><br/>

        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center">

            <mat-form-field floatPlaceholder="never">
                <mat-select placeholder=" Sub Department">
                    <input class="input1" matInput type="text">
                    <mat-option *ngFor="let subdepartment of subdepartments " [value]="subdepartment.value">
                        {{ subdepartment.viewValue }}
                    </mat-option>
                </mat-select>
            </mat-form-field><br/>


            <mat-form-field floatPlaceholder="never">
                <mat-select placeholder=" Floor">
                    <input class="input1" matInput type="text">
                    <mat-option *ngFor="let floor of floors" [value]="floor.value">
                        {{ floor.viewValue }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div><br/>

        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center">

            <mat-form-field floatPlaceholder="never">
                <mat-select placeholder=" Status">
                    <input class="input1" matInput type="text">
                    <mat-option *ngFor="let status of statuses" [value]="status.value">

                        {{ status.viewValue }}
                    </mat-option>
                </mat-select>
            </mat-form-field> <br/>

            <mat-form-field floatPlaceholder="never">
                <mat-select placeholder=" Room Type  ">
                    <input class="input1" matInput type="text">
                    <mat-option *ngFor="let roomtype of roomtypes" [value]="roomtype.value">

                        {{ roomtype.viewValue }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div><br/>

        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center">

            <mat-input-container floatPlaceholder="never">
                <input matInput placeholder=" Responsible Person  ">
            </mat-input-container> <br/>

            <mat-input-container floatPlaceholder="never">
                <input matInput placeholder=" Room Number  ">
            </mat-input-container>
        </div>



    </div>
    <br/>
    <div fxLayout="row" fxLayoutAlign="center center">
        <button mat-raised-button color="primary">View All</button><br/>
    </div> <br/>

    <div class="material-table mat-elevation-z8">
        <mat-table #table [dataSource]="dataSource">


            <!-- Checkbox Column -->
            <ng-container matColumnDef="select">
                <mat-header-cell style="max-width:50px;" *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                </mat-header-cell>
                <mat-cell style="max-width:50px;" *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                </mat-cell>
            </ng-container>

            <ng-container matColumnDef="num">
                <mat-header-cell style="max-width:0px;" *matHeaderCellDef> </mat-header-cell>
                <mat-cell style="max-width:0px;" *matCellDef="let element"></mat-cell>
            </ng-container>

            <ng-container matColumnDef="statuses">
                <mat-header-cell *matHeaderCellDef> Completion Status </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.statuses}}</mat-cell>
            </ng-container>


            <ng-container matColumnDef="building">
                <mat-header-cell style="text-align:left; padding-left:70px;" *matHeaderCellDef> Building </mat-header-cell>
                <mat-cell style="text-align:left; padding-left:70px;" *matCellDef="let element"> {{element.building}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="floor">
                <mat-header-cell *matHeaderCellDef> Floor </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.floor}} </mat-cell>
            </ng-container>


            <ng-container matColumnDef="roomtype">
                <mat-header-cell *matHeaderCellDef> Room No. </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.roomtype}} </mat-cell>
            </ng-container>



            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
            </mat-row>

        </mat-table>
        <div style=height:30px;>
            <mat-paginator #paginator [pageSize]="9" [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>
        </div>
    </div>

</mat-sidenav-container>

.css文件

h1,h2 {
   font-family: Verdana, sans-serif;
    color:#1a084c;
    font-weight:bold;
    font-size:14px;
}


.mat-raised-button{
  border-radius: 15px; 
  font-size:12px;
  font-family: Verdana,Sans-Serif;
  text-align:center;
  font-weight:bold;
  height:30px;
}


mat-form-field, mat-input-container{
    font-family: Verdana, sans-serif;
    color:#1a084c;
    font-size:11px;
    height:10px;
    width:300px;
    }

 mat-select{
    font-family: Verdana, sans-serif;
    color:#1a084c;
    font-size:11px;
    width:300px;
    }



//styles for material -table

mat-header-cell, mat-header-row, .mat-header-cell-def{
    background:#f2f4f7;
    min-height:15px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    font-size:13px;
    color: #1a084c;
    margin-bottom:5px;
     top: 0;
    position: sticky;
    z-index: 1;
}

mat-row{
    min-height:20px;
    font-family:Verdana,sans-serif;
    font-size:11px;
    color: #1a084c;
    }
mat-cell{
    height:20px;
    font-family:Verdana,sans-serif;
    font-size:11px; 
    color: #1a084c;
}

.example-container {
  display: flex;
  flex-direction: column;
  max-height: 180px;
  margin:auto;
}

.mat-table {
    font-size:11px;
    font-family: Verdana,Sans-Serif;
    color: #1a084c;
    overflow: auto;
    max-height: 180px;
}

mat-header-cell, mat-header-row, .mat-header-cell-def{
    background:#f2f4f7;
    min-height:15px;
    font-family:Verdana,sans-serif;
    font-weight:bold;
    font-size:13px;
    color: #1a084c;
    margin-bottom:5px;
     top: 0;
    position: sticky;
    z-index: 1;
}

mat-row{
    min-height:20px;
    font-family:Verdana,sans-serif;
    font-size:11px;
    color: #1a084c;
    }
mat-cell{
    height:20px;
    font-family:Verdana,sans-serif;
    font-size:11px; 
    color: #1a084c;
}


  @media only screen and (max-width: 736px) and (orientation:portrait) {
    mat-header-row, mat-row {
     width: 200%; 
    }

  }
//style for the paginator

mat-paginator{
}
.mat-paginator-container{
    float:right;
}

.mat-subheader{
    font-family: Verdana, sans-serif;
    font-size: 13px;
    font-weight:bold;
    background-color: #f2f4f7;
    height:8px;   
    margin-top:5px;
    }

.mat-list-item{
    font-family: Verdana, sans-serif;
    font-size: 12px;
    height: 20px;
}

.mat-list-item:visited {
    color: #0c0c28;
    background-color: transparent;
    text-decoration: none;
}

.mat-list-item:hover {
    color: #0c0c28;
    background-color: transparent;
    text-decoration: underline;
    font-weight: bold;
}

.mat-list-item:active {
    color: #0c0c28;
    background-color: transparent;
    text-decoration: underline;
}

.ts文件

import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit, ViewChild, Inject  } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
/**
 * @title Table with selection
 */
@Component({
  selector: 'table-selection-example',
  styleUrls: ['table-selection-example.css'],
  templateUrl: 'table-selection-example.html',
  encapsulation: ViewEncapsulation.None
})
export class TableSelectionExample {
   selecteddept: string;

departments = [
    {value: 'Department 1', viewValue: 'Department 1'},
    {value: 'Department 2', viewValue: 'Department 2'},
    {value: 'Department 3', viewValue: 'Department 3'}
  ];


    department = [
    {value: ' ASB ', viewValue: ' ASB '},
    {value: 'BIOCHEMISTRY 2', viewValue: 'BIOCHEMISTRY 2'},
    {value: 'BUDGET AND COST 3', viewValue: 'BUDGET AND COST 3'},
      {value: ' CANCER CTR ', viewValue: ' CANCER CTR '},
    {value: 'CARDIOTHOR SURG 2', viewValue: 'CARDIOTHOR SURG 2'},
    {value: 'CELL BIOLOGY', viewValue: 'CELL BIOLOGY'},
      {value: ' DMB ', viewValue: ' DMB '},
    {value: 'DUPLICATING SVCS', viewValue: 'DUPLICATING SVCS'},
    {value: 'EMERGENCY MEDICINE', viewValue: 'EMERGENCY MEDICINE'}
  ];




    buildings = [
    {value: 'Alpha', viewValue: 'Alpha '},
    {value: 'Beta ', viewValue: 'Beta '},
    {value: 'Gamma ', viewValue: 'Gamma '},
     {value: 'delta ', viewValue: 'delta '},
      {value: 'ribon ', viewValue: 'ribon '}
  ];


    subdepartments = [
    {value: 'Sdept', viewValue: 'Sdept'},
    {value: 'bdept', viewValue: 'bdept'},
     {value: 'cdept', viewValue: 'cdept'},
    {value: 'zdept', viewValue: 'zdept'},
     {value: 'ldept', viewValue: 'ldept'},
    {value: 'mdept', viewValue: 'mdept'}
  ];


    floors = [
    {value: 'first', viewValue: 'first'},
    {value: 'second', viewValue: 'second'},
    {value: 'third', viewValue: 'third'}
  ];

   statuses = [
    {value: 'Status 1', viewValue: 'Status 1'},
    {value: 'Status 2', viewValue: 'Status 2'},
    {value: 'Status 3', viewValue: 'Status 3'}
  ];

     roomtypes = [
    {value: '  1', viewValue: '  1'},
    {value: '  2', viewValue: '  2'},
    {value: '  3', viewValue: '  3'}
  ];


  constructor(public showmenu:ShowmenuService, private _activateroute: ActivatedRoute) { }

  ngOnInit() {
    this.showmenu.show();
    this.showmenu.show1();

  } 

  displayedColumns = ['num', 'select','statuses', 'building', 'floor', 'roomtype'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
  selection = new SelectionModel<Element>(true, []);

  @ViewChild(MatPaginator) paginator: MatPaginator;
   ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }


  /** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }



}

 export interface Element {
  statuses: string;
  num: any;
  building: string;
  floor:string;
   roomtype:string;
}

const ELEMENT_DATA: Element[] = [
  {num:1,statuses: 'accepted', building: 'Abby', floor:'1',roomtype:'2'},
   {num:1,statuses: 'accepted', building: 'Hospital ', floor:'2',roomtype:'1'}, 
   {num:1,statuses: 'accepted', building: 'CBS', floor:'3',roomtype:'1'}, 
   {num:1,statuses: 'accepted', building: 'Flexner Hall', floor:'4',roomtype:'1'},
    {num:1,statuses: 'accepted', building: 'Abby', floor:'5',roomtype:'1'},
     {num:1,statuses: 'accepted', building: 'Hospital', floor:'5',roomtype:'1'}, 
     {num:1,statuses: 'accepted', building: 'CBS', floor:'6',roomtype:'1'},
     {num:1,statuses: 'accepted', building: 'Abby', floor:'1',roomtype:'2'},
   {num:1,statuses: 'accepted', building: 'Hospital ', floor:'2',roomtype:'1'}, 
   {num:1,statuses: 'accepted', building: 'CBS', floor:'3',roomtype:'1'}, 
   {num:1,statuses: 'accepted', building: 'Flexner Hall', floor:'4',roomtype:'1'},
    {num:1,statuses: 'accepted', building: 'Abby', floor:'5',roomtype:'1'},
     {num:1,statuses: 'accepted', building: 'Hospital', floor:'5',roomtype:'1'}, 
     {num:1,statuses: 'accepted', building: 'CBS', floor:'6',roomtype:'1'}
];

Answer 1

你只需要调整mat-row，mat-h​​eader-row的字体和宽度，这样它们就可以适应小屏幕并且滚动条会消失:

@media only screen and (max-width: 736px) and (orientation:portrait) {
    mat-header-row, mat-row {
      width: 100%; 
    }

    mat-row{
        font-size:8px;
    }

   mat-cell{
    font-size:8px;  
   }

DEMO