29

使用する画面サイズに関係なく、Sidenav は常に同じサイズです。- flex - flex="85" などの属性を追加してみました（コンテナの85％を取得するため）

良いアプローチが見つからないようです。

4

7 に答える 7

44

angular マテリアルでは、md-sidenav には次の属性があります。

width: 304px;
min-width: 304px;

そのため、使用するデバイスに関係なく、幅は 304 ピクセルに固定されます。したがって、sidenav の幅を変更したい場合は、css を少し変更する必要があります。

最新のブラウザーのみをサポートすることに問題がない場合は、vw メジャー (ビューポート幅の 1/100) に変更して、別の css ファイルに追加できます。コードは次のようになります。

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 85vw !important;
    max-width: 400px !important;
}

ここにプランカーがあります: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview

于 2014-12-24T15:32:45.380 に答える
8

user3587412 が提出した回答により、幅を変更できましたが、Craig Shearer と同じ問題があり、アニメーションが殺されていました。そこで、いろいろと試してみた結果、これにたどり着きました。

 md-sidenav.md-locked-open {
   width: 250px;
   min-width: 250px;
   max-width: 250px;
 }

それが適切な方法かどうかはわかりませんが、私にはうまくいったようです。

于 2016-01-02T03:00:02.373 に答える
7

user3587412 のおかげで、必要なスタイルを簡単に見つけることができました。md-sidenav をフレックスの親に合わせて調整するには、オーバーライドするだけです

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 0px !important;
    width: auto !important;
    max-width: none !important;
}
于 2015-04-16T07:44:14.527 に答える
5

このスレッドで別の CSS を試した後、次のようになります。

md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

私は現在角度のある素材1.0.8を使用しており、Chrome50のみでテストしています。

このCSSを使用すると、私にとって何がうまくいきますか:

  • アニメーション開閉OK
  • ロック時OK
  • ロックされていないときはOK
于 2016-05-11T15:23:35.550 に答える
0

私もこの問題に遭遇しました -304px幅は十分ですが、右側のコンテンツ領域にサイドナビゲーションを圧迫しているカードがありました. そのため、フレックス グリッドを使用して、<md-sidenav flex="15" class="md-sidenav-left ...CSS をオーバーライドせずに必要な幅を追加することができました。これはうまくいかなかったようです。おそらく、デザインのレイアウト オプションに関係しているのでしょう...

于 2015-01-20T21:37:01.823 に答える