web-dev-qa-db-ja.com

Angular2 + Material：mat-toolvは、mat-elevation-z *にもかかわらず、mat-sidenav-containerの上に影を付けません。

Material guide の外観を模倣しようとすると、mat-sidenav-container要素の上にツールバーの影をレンダリングできません。

ツールバーとサイドナビゲーションが表示されているが、ドロップシャドウが表示されていないページ：

enter image description here

ツールバーのみを表示するページ、影がレンダリングされます：

enter image description here

HTMLコードを見てください。これはもっと簡単なことではありません。何が欠けていますか？ありがとう...

app.component.html

<mat-toolbar class="mat-elevation-z6" color="primary">
  toolbar
</mat-toolbar>

<mat-sidenav-container >

  <!-- Side menu -->
  <mat-sidenav mode="side" opened="true">

    <h3>Menu 1</h3>
    <ul>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/">dashboard</a>
      </li>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/resolutions">resolutions</a>
      </li>
    </ul>

    <!-- List resolutions -->
    <h3>Menu 2</h3>
    <ul>
      <li>
        <a>incentive</a>
      </li>
    </ul>

  </mat-sidenav>

  <!-- Routed contents -->
  <div class="contents">
    <router-outlet></router-outlet>
  </div>

</mat-sidenav-container>
angularangular-materialmaterial-design
10
Jem

まったく同じ問題がありました。 CSSに次のクラスを追加して解決しました。

.sidenav-container {
  z-index: -1 !important;
}

そしてそれをマット-sidenav-containerに追加しました

<mat-sidenav-container class="sidenav-container">
...
</mat-sidenav-container>
17
dda

これを試すこともできます：

.sidenav-container {
  position:fixed;
  width:100%;
  z-index:-1;
}
1
Atanas Beychev

私は次のように問題を解決しました：

CSS:

.tbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

次に、私のテンプレートで：

HTML:
<mat-toolbar class="mat-elevation-z6 tbar">
  ...
</mat-toolbar>
1
yuro

テストできませんでしたが。高架に見えないカードでも同様の問題がありました。私は、ハードレフトからそれらを埋め込む必要があるだけです。

<mat-sidenav mode="side" opened="true" style="margin: 10px;">
1
Tim Tharratt

Z-indexの変更が機能しない場合は、次のクラスを追加します。

<mat-toolbar class="mat-elevation-z2"></mat-toolbar>

angularガイドに従って：（ https://material.angular.io/guide/elevation ）

0
FiringBlanks

これをスタイルに追加します。

.mat-toolbar {
  position: relative;
  z-index: 2;
}
0
Alex Nepsha