Изменить ширину ящика в MDL

Question

Я только что начал работу с Material Design Lite. Я хочу изменить ширину ящика.

То, что я пытался что-то вдоль этих линий:

.mdl-layout__drawer { 
    width: 25%; 
} 

Это приводит в ящик, перекрывающей область содержимого.

Как исправить эту проблему?

Answer 1

Ящик является абсолютным компонентом, который располагается в его родительском контейнере в заданном левом положении. Когда вы меняете его ширину, вам также нужно изменить его положение.

Вот CSS единственное решение для шириной 500px -

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

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

Вот codepen пример - http://codepen.io/mdlhut/pen/pJmjBe