Thay đổi chiều rộng ngăn kéo trong MDL

Question

Tôi vừa mới bắt đầu với Material Design Lite. Tôi muốn thay đổi chiều rộng của ngăn kéo.

Những gì tôi đã cố gắng là một cái gì đó dọc theo những dòng:

.mdl-layout__drawer { 
    width: 25%; 
} 

Điều này dẫn đến ngăn kéo chồng chéo khu vực nội dung.

Làm cách nào để khắc phục sự cố này?

Answer 1

Ngăn kéo là thành phần tuyệt đối nằm trong vùng chứa chính của vị trí được xác định bên trái. Khi bạn thay đổi chiều rộng của nó, bạn sẽ cần phải thay đổi vị trí của nó quá.

Đây là css chỉ giải pháp cho có chiều rộng 500px -

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

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

Dưới đây là một ví dụ codepen - http://codepen.io/mdlhut/pen/pJmjBe