Как изменить ширину Sidenav в дизайне углового материала?

Ответ 1

В угловом материале md-sidenav имеет следующие атрибуты:

width: 304px;
min-width: 304px;

Вот почему ширина будет фиксирована на 304 px независимо от того, какое устройство вы используете. Поэтому, если вы хотите изменить ширину sidenav, вам придется немного изменить css.

Если у вас все в порядке с поддержкой только современных браузеров, вы можете изменить его на показатель vw (1/100th ширины окна просмотра) и добавить его в отдельный файл css. Код будет выглядеть примерно так:

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 85vw !important;
    max-width: 400px !important;
} 

Здесь плукер: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview

Ответ 2

Благодаря user3587412 я мог легко найти необходимые стили. Чтобы заставить md-sidenav приспособиться к родительскому элементу flex, просто переопределите

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 0px !important;
    width: auto !important;
    max-width: none !important;
}

Ответ 3

Ответ, представленный пользователем3587412, позволил мне изменить ширину, но у меня была та же проблема, что и Крейг Ширер, когда он убивал анимацию. Поэтому я попробовал несколько разных вещей и придумал это.

 md-sidenav.md-locked-open {
   width: 250px;
   min-width: 250px;
   max-width: 250px;
 }

Я не уверен, что это правильно, но, похоже, это работает для меня.

Ответ 4

После того, как вы попробовали разные CSS в этом потоке, я получаю:

md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

В настоящее время я работаю с угловым материалом 1.0.8 и тестирую только с Chrome 50.

С этим CSS что работает для меня:

• Анимация закрыта и открыта ОК
• При блокировке OK
• Когда не заблокировано OK

Ответ 5

Я тоже столкнулся с этой проблемой - хотя ширины 304px достаточно, у меня была карта в области содержимого справа, которая сжимала sidenav. Таким образом, используя гибкую сетку, я смог добавить <md-sidenav flex="15" class="md-sidenav-left... чтобы получить <md-sidenav flex="15" class="md-sidenav-left... ширину без переопределения CSS. Похоже, что это не <md-sidenav flex="15" class="md-sidenav-left... вы, возможно, это связано с параметрами макета в вашем дизайне...