0
327
VistasCaja de problema de React js material ui dentro del cajón receptivo
Tomé el ejemplo en la documentación sobre el Responsive drawer .
Como se puede apreciar en la imagen, la parte del contenido a cierta altura que depende del contexto del mismo.
Pero me gustaría que el fondo del contexto como se ve en la imagen sea el mismo.
Intenté agregar al cuadro de texto, ya sea usando flex: 1 o height: "100%" , pero nada cambia.
Enlace: códigos y caja
¿Como lo puedo hacer?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
La forma más sencilla de hacer que funcione como se espera es asignar una altura máxima de ventana gráfica ( height: 100vh ) a su componente de caja.
... <Box component="main" sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` }, height: '100vh', color: "#fff", backgroundColor: "#212121" }}> <Toolbar /> <Typography paragraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </Typography> </Box> ...Ejemplo de trabajo:
Nota: sus soluciones no funcionarán debido a lo siguiente:
- La propiedad de
heightcon un valor porcentual se heredará del elemento principal, ya que laheightdel elemento principal de forma predeterminada esauto(que también se hereda de su elemento principal), por lo que no funcionará como se esperaba. - La propiedad
flexno funcionará como se esperaba porque laflex-directionserárowde forma predeterminada. Pero tampoco funcionará si lo cambia acolumnya que la altura máxima del contenedor esautoy sigue la misma regla que la anterior.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta