Установить фиксированный угол панели инструментов в навигационных схемах - PullRequest
0 голосов
/ 29 октября 2018

У меня проблема при использовании фиксированной панели инструментов внутри mat-sidenav-content. Когда левая строка видна, фиксированный тобар внутри sidenav-контента принимает другую ширину, и правые кнопки выходят из экрана

Чек <!-- Toolbar --> <mat-toolbar color="primary" style="z-index:10; position:fixed">

<mat-sidenav-container>
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
 [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary" style="z-index: 10;">
        <button mat-button>My APP</button>    
</mat-toolbar>


  <!-- Nav list -->
  <mat-nav-list style="background: white; width:200px" class="menuList">
    <h3 mat-subheader>General</h3>
    <mat-list-item *ngFor="let menuItem of menu"class="menuItem">                         
      <a matLine  >{{menuItem.title}} </a>    
      <mat-icon mat-list-icon>{{menuItem.icon}}</mat-icon> 
    </mat-list-item>      
  </mat-nav-list>

  <mat-nav-list style="background: white; width:200px" class="menuList">
    <h3 mat-subheader>System</h3>
    <mat-list-item class="menuItem">       
      <a matLine>Users</a>
      <mat-icon mat-list-icon>person</mat-icon> 
      </mat-list-item>        
      <mat-list-item class="menuItem">       
        <a matLine>Settings</a>
        <mat-icon mat-list-icon>settings</mat-icon> 
        </mat-list-item>
  </mat-nav-list>
</mat-sidenav>

<mat-sidenav-content >   

<!-- Toolbar -->
<mat-toolbar  color="primary" style="padding:0px;margin:0px; z-index: 10; position:fixed">       
    <a mat-button>Page name</a>


    <div fxFlex></div>
    <button mat-icon-button>
        <mat-icon matBadge="15" matBadgeColor="warn">notifications</mat-icon>
    </button>
</mat-toolbar>


<!-- Add Content Here  -->
<div class="pagina">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin risus sit amet nunc vestibulum, ut vehicula nunc auctor. </p>
</div>

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

Демонстрация stackblitz (вы должны развернуть страницу, чтобы увидеть, что происходит)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...