css - container - mat-sidenav example

¿Cómo cambiar el ancho de un Sidenav en el diseño de material angular?

Question

No importa qué tamaño de pantalla use, el Sidenav es siempre el mismo tamaño. Intenté agregar atributos como - flex - flex = "85" (para obtener el 85% de su contenedor)

Parece que no puede encontrar un buen enfoque.

Answer 1

Después de probar diferentes CSS en este hilo termino con:

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;
}

Actualmente estoy en material angular 1.0.8 y probado con Chrome 50 solamente.

Con este CSS lo que funciona para mí:

• Animación cerrar y abrir OK
• Cuando está bloqueado OK
• Cuando no está bloqueado OK

Answer 2

En material angular, md-sidenav tiene estos atributos:

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

Es por eso que el ancho se fijará en 304 px sin importar el dispositivo que use. Así que si desea cambiar el ancho de su sidenav, tendrá que cambiar el css un poco.

Si está de acuerdo con admitir solo los navegadores modernos, puede cambiarlo a una medida de vw (1/100 del ancho de la ventana gráfica) y agregarlo a un archivo css separado. El código se verá algo así:

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;
} 

Aquí hay un plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview

Answer 3

Gracias al usuario 3587412 pude encontrar fácilmente los estilos requeridos. Para hacer que md-sidenav se ajuste a un padre flexible, simplemente anule

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;
}

Answer 4

La respuesta enviada por el usuario 3587412 me permitió cambiar el ancho, pero estaba teniendo el mismo problema que Craig Shearer, ya que mató la animación. Así que probé algunas cosas diferentes y se me ocurrió esto.

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

No estoy seguro si esa es la forma correcta pero parece funcionar para mí.

Answer 5

También me encontré con este problema: aunque el ancho de 304px es suficiente, tenía una tarjeta en el área de contenido a la derecha que estaba apretando el sidenav. Por lo tanto, utilizando la cuadrícula flexible pude agregar <md-sidenav flex="15" class="md-sidenav-left ... para obtener el ancho que quería sin sobrescribir el CSS. Parece que esto no funcionó para usted, así que tal vez tenga que ver con las opciones de diseño en su diseño ...