how to avoid horizontal and vertical scrolls in angular using angular material flexlayout

3
votes

I am working with angular 2 using angular material and flex layout. I have implemented mat-sidenav and have taken some mat-form-field and also implemented mat-table

I have only specified max-height to the mat-table component but I am getting both horizontal and vertical scroll bars for the page apart from the vertical scroll bar of mat-table

Below shown is my page.

enter image description here

And when make it to xs viewport, i am getting multiple scrolls as shown below

enter image description here

Can anybody please help me in resolving how to avoid these scroll bars ...?

Please access my sample code here

.html file

<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 file

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 file

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'}
];
1
angularangular-materialangular-flex-layout
Your stackblitz example is broken - please fix it. - G. Tranter
showing error in stackblitz - Sharma Vikram
I dont get why the stackblitz is not working...!....can you please check the question , i have edited and pasted the code... - Heena
so i can't edit ...? - Heena
hmmm i dont know how to rollback :(..? - Heena

1 Answers

0
votes

You just need to adjust font and width for mat-row, mat-header-row, so they can fit in the small screen and the scrollbar will disapear:

@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