Независимо от того, какой размер экрана я использую, Sidenav всегда того же размера. Я попытался добавить такие атрибуты, как - flex - flex = "85" (чтобы получить 85% своего контейнера)
Кажется, не находит подходящего подхода.
Независимо от того, какой размер экрана я использую, Sidenav всегда того же размера. Я попытался добавить такие атрибуты, как - flex - flex = "85" (чтобы получить 85% своего контейнера)
Кажется, не находит подходящего подхода.
В угловом материале 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
Благодаря 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;
}
Ответ, представленный пользователем3587412, позволил мне изменить ширину, но у меня была та же проблема, что и Крейг Ширер, когда он убивал анимацию. Поэтому я попробовал несколько разных вещей и придумал это.
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
Я не уверен, что это правильно, но, похоже, это работает для меня.
После того, как вы попробовали разные 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 что работает для меня:
Я тоже столкнулся с этой проблемой - хотя ширины 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...
вы, возможно, это связано с параметрами макета в вашем дизайне...