Как заставить контент адаптироваться к экрану при открытии Sidenav (Im Using Angular 5) - PullRequest
Новая
       23

Как заставить контент адаптироваться к экрану при открытии Sidenav (Im Using Angular 5)

0 голосов
/ 20 декабря 2018

Проблема: Привет, я использую Angular 5 с Angular Material.То, что я боролся в течение нескольких дней, и я не могу сделать, это то, что когда Sidenav или боковая панель открыта (как вы хотите назвать это), контент покидает экран.Я хочу, чтобы он адаптировался к содержанию, а не уходил.

GIF стоит тысячи слов: enter image description here

app.header-component.html 

<!--- Toolbar starts here-->
<div class="container-toolbar">
<mat-toolbar color="primary" class="fixed-header">

<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span class="spacer"></span>
<button type="button" mat-icon-button href="">
<mat-icon matTooltip="Salir">exit_to_app</mat-icon>
</button>


</mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
  <mat-sidenav #drawer fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 2;">
   		<mat-nav-list>
<app-tabs-nav></app-tabs-nav>
		</mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <router-outlet></router-outlet>

  </mat-sidenav-content>
</mat-sidenav-container>

app.component.html 

<app-header></app-header>
<div class="app-body">


  <main class="main">
    <div class="container-fluid">
      <!-- <router-outlet></router-outlet> -->
      <ngx-loading [show]="loading"></ngx-loading>
    </div>
  </main>
</div>

Может кто-нибудь сказать мне, где начать искать решение?Я уже перепробовал много вещей, и я несколько заблокирован, спасибо!

...