Change drawer width in MDL

Question

I just started working with Material Design Lite. I want to change the width of the box.

What I tried is something like that:

.mdl-layout__drawer { width: 25%; } 

This causes the box to overlap the content area.

How to fix this problem?

Answer 1

A box is an absolute component that places the parent container in a specific left position. When you change its width, you will also need to change its position.

Here is only css solution for 500px width -

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

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