css - MDL の引き出しの幅を変更する

Question

マテリアル デザイン ライトを使い始めたばかりです。引き出しの幅を変えたい。

私が試したのは、次のようなものです。

.mdl-layout__drawer {
  width: 25%;
}

これにより、ドロワーがコンテンツ領域に重なって表示されます。

この問題を修正するにはどうすればよいですか?

Answer 1

ドロワーは、定義された左の位置で親コンテナーに置かれる絶対コンポーネントです。幅を変更すると、位置も変更する必要があります。

幅500pxのcssのみのソリューションは次のとおりです-

.mdl-layout__drawer {
  width: 500px;
  left: -250px;
}

.mdl-layout__drawer.is-visible {
  left: 0;
}

ここにコードペンの例があります - http://codepen.io/mdlhut/pen/pJmjBe