web-dev-qa-db-ja.com

Angular Material DesignでSidenavの幅を変更するには？

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

良いアプローチを見つけることができないようです。

cssangularjsangular-material
25
pierrebo

angular material、md-sidenavには次の属性があります。

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

そのため、使用するデバイスに関係なく、幅は304ピクセルに固定されます。したがって、サイドナブの幅を変更する場合は、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

37
user3587412

User3587412から送信された回答により、幅を変更できましたが、Craig Shearerと同じ問題が発生し、アニメーションが停止していました。それで、私はいくつかの異なることを試みて、これを思いつきました。

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

それが適切な方法であるかどうかはわかりませんが、それは私のために働くように見えました。

8
Trevor Glass

User3587412のおかげで、必要なスタイルを簡単に見つけることができました。 md-sidenavがflex親に適応するようにするには、単にオーバーライドします

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;
}
7
Vector

このスレッドで別の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およびChrome 50のみ。

このCSSで私にとってうまくいくのは：

  • アニメーションを閉じて開くOK
  • ロックされたらOK
  • ロックされていない場合OK
5
Maxence