5

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?

dshgna
  • 812
  • 1
  • 15
  • 34

1 Answers1

7

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

David
  • 557
  • 4
  • 15