Zmień szerokość szuflady w MDL

Question

Właśnie zacząłem od Material Design Lite. Chcę zmienić szerokość szuflady.

Co Próbowałem coś wzdłuż tych linii:

.mdl-layout__drawer { 
    width: 25%; 
} 

Wynika to w szufladzie zachodzi na obszarze zawartości.

Jak rozwiązać ten problem?

Answer 1

Szuflada jest bezwzględnym komponentem, który znajduje się w kontenerze nadrzędnym zdefiniowanej lewej pozycji. Gdy zmienisz jego szerokość, musisz również zmienić jego pozycję.

Oto css jedynym rozwiązaniem dla szerokości 500px -

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

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

Oto codepen przykład - http://codepen.io/mdlhut/pen/pJmjBe