Material-ui: [Modal] Problema con la barra de desplazamiento y el relleno
Cuando se abre Menu , la barra de desplazamiento de la página desaparece. Esto puede afectar el diseño de la página. En mi caso, salta todo a la derecha, lo cual es un error visual.
Solución
A) arregle esto en la biblioteca, o B) observe este comportamiento en los documentos y proporcione formas de resolverlo:
https://material-ui-next.com/demos/menus/
El contenedor para las cosas que saltan es absolute, left: 0, right: 0 , con secciones que son text-align: center o display: flex; flex-direction: column; align-items: center;
Tu entorno
| Tech | Versión |
| -------------- | --------- |
| Material-UI | 1.0.0-beta.29 |
Asuntos relacionados
Todos están cerrados y no encontré la solución en ellos:
8475 # 7431 # 6656 # 8710
lorensr
Todos 47 comentarios
En mi caso, salta todo a la derecha, lo cual es un error visual.
@lorensr ¿Tienes un ejemplo de reproducción? Es una limitación conocida de deshabilitar la barra de desplazamiento. Manejamos elementos de posición absoluta que tienen el nombre de clase .mui-fixed .
¡Necesitamos documentarlo!
oliviertassinari
en 23 ene. 2018
FYI, otra cosa que he encontrado es que la corrección .mui-fixed solo funciona si su elemento fijo también tiene
box-sizing: content-box;
pelotom
en 23 ene. 2018
Gracias, agregar la clase funcionó. No necesitaba content-box . El elemento es border-box .
También debe tenerse en cuenta que cuando se elimina la barra de desplazamiento, el encabezado del bloque dentro de mi elemento right: 0 no se extendía hasta el borde derecho del navegador.
Se corrigió cambiando right: -20px , por lo que ahora css es:
main {
position: absolute;
box-sizing: border-box;
left: 0;
right: -20px;
overflow-x: hidden;
}
La desventaja es que cuando la barra de desplazamiento está presente, los niños centrados ahora están 10 píxeles a la derecha del centro y tengo que ocultar el desbordamiento.
lorensr
en 25 ene. 2018
En algunos casos, no es posible aplicar la clase css mui-fixed a algunos elementos fijos. Por ejemplo, el widget de chat nítido en la parte inferior de mi página. Probablemente también suceda con el widget de intercomunicador.
¿Alguien más tiene el mismo problema y encontró una solución?
abhishiv
en 16 mar. 2018
Tuve un problema similar, pero el contenedor no era absoluto. Lo que me solucionó fue agregar !important a mi relleno de esta manera:
padding: 0 !important;
michielglibert
en 5 jun. 2018
No estoy 100% seguro de si esta es la forma correcta de hacerlo, pero agregué las siguientes propiedades css a la etiqueta <body>
`` css
cuerpo {
posición: absoluta;
izquierda: -17px;
derecha: -17px;
acolchado-top: 0;
padding-right: 17px;
padding-left: 17px;
fondo de relleno: 0px;
overflow-x: oculto;
overflow-y: auto! important // Elimina! important si quieres que la barra de desplazamiento desaparezca
}
`` ``
chrisshaddad
en 10 jul. 2018
Ojalá esto ayude a alguien más:
Después de probar varias anulaciones de CSS que parecían funcionar pero se sentían mal, como las de @chrisshaddad , descubrí que estábamos cambiando debido a que anteriormente habíamos forzado overflow-y: scroll en toda nuestra aplicación. Habíamos forzado la aplicación de la barra de desplazamiento del eje y en toda la aplicación para evitar el desplazamiento debido a que nuestras páginas tenían longitudes variables, algunas requieren desplazamiento del eje y, otras no.
En lugar de colocar un montón de body adicionales o estilo en línea, pudimos arreglar el cambio aislando el overflow-y: scroll del contenido debajo de nuestra AppBar / Header fija. Ahora tenemos una barra de desplazamiento de hoja perenne para el contenido de la página, en lugar de toda la ventana, sin cambiar de modales / menús, ya que la barra de desplazamiento está adjunta al contenido de la página y no al body .
Como referencia, nuestro DOM se ve así:
<div>
<Header />
<div className="pageContent">
<div className="page">
<Route exact path="/pathToPage"> component={PageContent} />
</div>
</div>
</div>
y el CSS (la altura de nuestro encabezado es 45px):
.pageContent {
position: absolute;
top: 45px;
left: 0;
right: 0;
bottom: 0;
}
.pageContent .page {
height: 100%;
overflow-y: scroll;
}
cvocke
en 16 jul. 2018
Hola,
Actualmente tengo este mismo problema y debo admitir que no puedo encontrar mi felicidad en ninguna de las soluciones mencionadas.
Por lo que entendí, Modal no permite usar la barra de desplazamiento, lo cual es problemático porque uso un Modal para realizar una búsqueda avanzada y un Modal no siempre es necesario tener un contenido breve.
Pensando en el problema y las soluciones que mencionó, me preguntaba por qué no sería posible que Material-UI implemente una propiedad desplazable para todo lo relacionado con Modal , Dialog , Menu y otros elementos emergentes. De forma predeterminada, esta propiedad booleana sería falsa, pero podría ser verdadera para permitir que se muestre una barra de desplazamiento en el componente.
Si esto no es posible, quizás implemente un componente ScrollBar directamente, incluso si prefiero la idea anterior.
Sospecho que es más fácil decirlo que hacerlo. Por tanto, me gustaría agradecerle el trabajo excepcional que está realizando.
rememberYou
en 9 sept. 2018
FWIW Acabo de establecer un body { overflow-y: scroll } global y todo parece funcionar bien.
avdd
en 9 sept. 2018
@avdd Esto no ayuda ya que te permitirá desplazarte en el cuerpo y no en el modal.
rememberYou
en 9 sept. 2018
@rememberYou El modal es una primitiva de bajo nivel, es posible que desee utilizar el diálogo en su lugar: https://material-ui.com/demos/dialogs/#scrolling -long-content.
oliviertassinari
en 9 sept. 2018
@rememberYou ModalManager establece overflow:hidden directamente en el elemento contenedor (cuerpo) cuando el modal es visible y lo restablece cuando el modal está terminado, así que sí, funciona para mí.
avdd
en 9 sept. 2018
@oliviertassinari gracias por la solución.
@avdd mis disculpas, no probé con el ModalManager .
rememberYou
en 9 sept. 2018
@lorensr ¿
nathanmarks
en 10 sept. 2018
@oliviertassinari Una última cosa, probé con el Dialog , funciona bien, pero como quiero un diseño más particular, me gusta usar el Modals .
El problema es que tengo un Modal (Iniciar sesión) que tiene un enlace para abrir un segundo Modal (Registrarse) que tiene un enlace para volver al inicio de sesión.
En este caso, ¿tengo que usar ModalManager para agregar y eliminar fácilmente un Modal ? Lamento salir del tema del problema, no encontré ninguna documentación sobre el tema.
rememberYou
en 10 sept. 2018
@nathanmarks sí, parece que las páginas de documentos de componentes modales aún no mencionan .mui-fixed
lorensr
en 10 sept. 2018
Con 3.5.1, el cuadro de diálogo se desplaza hacia la izquierda antes de cerrarse.
Reproducible aquí https://material-ui.com/demos/dialogs/ - abre y cierra la demostración de Simple Dialog.
Después de la prueba, esto comenzó en v3.3.
stephen099
en 14 nov. 2018
@ stephen099 ¡ Gracias por informarnos! Lo confirmo, pero es un problema diferente.
oliviertassinari
en 22 nov. 2018
He notado que en el encabezado (con el último mui), se agrega mui-fixed a los nombres de las clases, pero no se le asigna un estilo (al inspeccionar el encabezado, no hay mui-fixed regla cargada.
Me pregunto, ¿por qué está sucediendo este 'relleno adicional' en primer lugar, por qué es necesario? Para mí, está roto por el componente Menu .
¿Cómo puedo evitar que esto suceda sin tener que anular el estilo CSS con !important ...? Gracias
vajnorcan
en 27 feb. 2019
@vajnorcan El nombre de la clase mui-fixed indica al componente modal (utilizado por el menú) que la posición del elemento cambiará cuando se bloquee el desplazamiento en el elemento del cuerpo. Compensamos la eliminación del ancho de la barra de desplazamiento con un estilo de relleno derecho temporal. ¿Podría proporcionar un ejemplo de reproducción mínima en CodeSandbox? Gracias.
oliviertassinari
en 27 feb. 2019
Lo siento, ¿dónde pones el .mui-fixed? Tengo este problema con una selección que abre un menú.
capsule5
en 13 mar. 2019
@ capsule5 Debes agregarlo al elemento que "salta" debido a que la barra de desplazamiento está deshabilitada al abrir el menú (generalmente debe ser un elemento fijo a la derecha) y su relleno será manejado por ti .
También tenga en cuenta que, como se mencionó anteriormente, es posible que deba agregar esto a sus estilos globales:
.mui-fixed {
/*
* make sure that added right padding
* actually pushes contents to the left
*/
box-sizing: content-box;
}
cvara
en 22 mar. 2019
No hay reproducción en este hilo. Estoy cerrando.
@cvara Lo seguimos en # 9275.
oliviertassinari
en 12 jul. 2019
No lo entiendo, ¿está resuelto? Actualicé de v0.9 a v4 y ahora, cuando abro modales, mi contenido salta a la izquierda (obteniendo padding-right: 17px ). ¿Cuál es la solución recomendada para ello?
Edición posterior:
Debido a que en mi caso tenía overflow-y: scroll !important; , también tuve que agregar padding-right: 0px !important; para solucionar este problema de salto.
Cristy94
en 9 nov. 2019
La forma en que lo arreglé fue simplemente agregar disableScrollLock={ true } en mi componente :)
Toshiuk
en 27 nov. 2019
@Toshiuk ¿ qué componente?
wongjiahau
en 1 dic. 2019
@wongjiahau el componente modal v4 +
sartios
en 4 dic. 2019
También puede agregar disableScrollLock al menú
jeronimomora
en 14 dic. 2019
Esto también se está reproduciendo para mí. Agregar disableScrollLock no es plausible ya que estoy usando componentes de terceros que agregan los elementos del menú. Esto debería arreglarse. Quizás detecte que la barra de desplazamiento realmente se muestra o no.
archfz
en 14 dic. 2019
@archfz ¿Tienes una reproducción?
oliviertassinari
en 15 dic. 2019
También estoy presenciando esto en el uso de componentes Select . Siempre que se abre Select menú desplegable overflow: hidden, padding-right: 15px se agrega body etiqueta principal
WholemealDrop
en 17 dic. 2019
@WholemealDrop Sigue # 17353.
oliviertassinari
en 17 dic. 2019
@oliviertassinari ahah aparentemente mis habilidades de búsqueda no son tan buenas. ¡Gracias!
WholemealDrop
en 17 dic. 2019
@oliviertassinari He logrado reducir el problema al núcleo. El problema parece ser que de alguna manera hay cálculos incorrectos cuando se combinan display: flex + minHeight: 100vh + body sin relleno y margen. Parece que el código espera que haya una barra de desplazamiento allí, pero de hecho no la hay. Este código debería reproducir el problema.
import React, {FunctionComponent, SyntheticEvent, useState} from 'react';
import {IconButton, Menu, MenuItem, Tooltip} from "@material-ui/core";
import TranslateIcon from "@material-ui/icons/Translate";
import MuiAppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
const AdminAppContainer: FunctionComponent = () => {
const handleMenu = (event: SyntheticEvent) => setAnchorEl(event.currentTarget);
const [anchorEl, setAnchorEl] = useState<Element | null>(null);
const open = Boolean(anchorEl);
const handleClose = () => setAnchorEl(null);
const body = document.getElementsByTagName('body')[0];
body.style.margin = "0";
body.style.padding = "0";
return (
<div style={{ display: 'flex', minHeight: '100vh'}}>
<MuiAppBar color="secondary" >
<Toolbar>
<div style={{flex: 1}}></div>
<div>
<Tooltip title='asd'>
<IconButton onClick={handleMenu}><TranslateIcon /></IconButton>
</Tooltip>
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
<MenuItem key={'test'} onClick={handleClose}>Test</MenuItem>
</Menu>
</div>
</Toolbar>
</MuiAppBar>
</div>
)
};
@archfz ¿Podrías crear un codeandbox por favor? (Puede comenzar con uno de los ejemplos de documentos).
mbrookes
en 18 dic. 2019
@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark
archfz
en 18 dic. 2019
@archfz Lo siento, me perdí esto.
¿Qué estoy buscando aquí? No experimento ningún cambio de diseño.
mbrookes
en 8 ene. 2020
@archfz Lo siento, me perdí esto.
¿Qué estoy buscando aquí? No experimento ningún cambio de diseño.
Cuando haces clic en el personaje en la parte superior derecha, se mueve hacia la izquierda cuando se abre el elemento del menú y luego vuelve a la derecha cuando se cierra el elemento del menú.
WholemealDrop
en 8 ene. 2020
¿Podrías abrir una nueva edición? Parece algo nuevo.
oliviertassinari
en 8 ene. 2020
@archfz Ok, es un conflicto con la información sobre herramientas. Vamos a ignorarlo.
oliviertassinari
en 11 ene. 2020
@oliviertassinari Bueno, no debemos ignorarlo porque es un problema real. React-admin usa material de interfaz de usuario y en realidad es un problema listo para usar. He creado un problema aquí https://github.com/mui-org/material-ui/issues/19203
archfz
en 12 ene. 2020
La solución reiterada por
Menú, StyledMenu:
disableScrollLock={ true }Seleccione:
MenuProps={{ disableScrollLock: true }}
¡Realmente necesitamos hacer que las soluciones sean más fáciles de encontrar! :-)
samheyman
en 1 mar. 2020
Tengo un problema con el color de fondo de la barra de herramientas cuando abro el menú y la barra de desplazamiento se vuelve invisible
aquí hay un ejemplo:
https://codesandbox.io/s/material-demo-nj80l
¿Conoces a alguien cómo se arregla?
Risbot
en 9 mar. 2020
solo agrega el siguiente CSS
body {padding-right: 0px! important; }
sandunr
en 11 abr. 2020
hola, en mi aplicación utilizo esta solución.
Agrego disableScrollLock={true} disablePortal={true} id="custom" en mi componente <Menu> y en mi css
#custom {
.MuiPopover-paper,
.MuiPopover-paper {
max-height: inherit !important;
}
}
esto funciona perfectamente en mi caso. Espero que estos trucos puedan ayudar.
Vincent-Alibert
en 22 abr. 2020
Experimenté los mismos problemas al trabajar con Diálogos. La siguiente es la única solución que he probado que elimina el cambio de contenido y aún bloquea el desplazamiento de la página subyacente / elimina su barra de desplazamiento.
Solución:
Vaya al div del contenedor más externo o cualquier div más externo (cualquier contenedor que encapsule toda su aplicación) en su aplicación y establezca su ancho en esto:
width: calc(100vw - 1px);
1px se puede sustituir por 34px o cualquier otro valor bajo. Esto hará que al abrir un diálogo se oculte la barra de desplazamiento de la página subyacente, si está presente, y no se creará ningún tipo de cambio en la posición del contenido. El desplazamiento todavía está bloqueado para la página subyacente y el desplazamiento aún es posible para su diálogo.
fastlogin
en 18 may. 2020
disableScrollLock = {true}
Eres simplemente brillante, gracias
cy-sachin-m
en 25 ago. 2020
Temas relacionados
pola88
·
3Comentarios
anthony-dandrea
·
3Comentarios
mattmiddlesworth
·
3Comentarios
revskill10
·
3Comentarios
iamzhouyi
·
3Comentarios
Comentario más útil
La forma en que lo arreglé fue simplemente agregar
disableScrollLock={ true }en mi componente :)