Change width of drawer in MDL

Question

I've just got started with Material Design Lite. I want to change the width of the drawer.

What I have tried is something along these lines:

.mdl-layout__drawer {
  width: 25%;
}

This results in the drawer overlapping the content area.

How do I correct this issue?

Answer 1

The drawer is an absolute component that rest in it's parent container a defined left position. When you change it's width, you'll need to alter it's position too.

Here's the css only solution for a width of 500px -

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

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

Here's a codepen example -http://codepen.io/mdlhut/pen/pJmjBe