Material-ui: [Modal] Problema de barra de rolagem e preenchimento
Quando um Menu abre, a barra de rolagem da página desaparece. Isso pode afetar o layout da página. No meu caso, ele pula tudo para a direita, o que é um bug visual.
Solução
Tanto A) corrija isso na biblioteca ou B) Observe esse comportamento na documentação e forneça maneiras de resolvê-lo:
https://material-ui-next.com/demos/menus/
O recipiente para as coisas que pulam é absolute, left: 0, right: 0 , com seções que são text-align: center ou display: flex; flex-direction: column; align-items: center;
Seu Ambiente
| Tech | Versão |
| -------------- | --------- |
| Material-UI | 1.0.0-beta.29 |
Assuntos relacionados
Estão todos fechados e não encontrei a solução neles:
8475 # 7431 # 6656 # 8710
lorensr
Todos 47 comentários
No meu caso, ele pula tudo para a direita, o que é um bug visual.
@lorensr Você tem um exemplo de reprodução? É uma limitação bem conhecida de desabilitar a barra de rolagem. Lidamos com elementos posicionados de forma absoluta que têm o nome de classe .mui-fixed .
Precisamos documentar isso!
oliviertassinari
em 23 jan. 2018
Para sua informação, outra coisa que descobri é que a correção .mui-fixed só funciona se o seu elemento fixo também tiver
box-sizing: content-box;
pelotom
em 23 jan. 2018
Obrigado, adicionar a classe funcionou. Eu não precisava de content-box . O elemento é border-box .
Também deve ser observado que quando a barra de rolagem é removida, o cabeçalho do bloco dentro do meu elemento right: 0 não se estende para a borda direita do navegador.
Corrigido alterando right: -20px , então agora css é:
main {
position: absolute;
box-sizing: border-box;
left: 0;
right: -20px;
overflow-x: hidden;
}
A desvantagem é que, quando a barra de rolagem está presente, os filhos centralizados agora estão 10 pixels à direita do centro e tenho que ocultar o estouro.
lorensr
em 25 jan. 2018
Em alguns casos, não é possível aplicar a classe mui-fixed css a alguns elementos fixos. Por exemplo, o widget de chat nítido na parte inferior da minha página. Provavelmente acontece com o widget de intercomunicação também.
Alguém mais tem o mesmo problema e encontrou uma solução?
abhishiv
em 16 mar. 2018
Tive um problema semelhante, mas o contêiner não era absoluto. O que corrigiu para mim foi adicionar !important ao meu preenchimento assim:
padding: 0 !important;
michielglibert
em 5 jun. 2018
Não tenho 100% de certeza se esta é a maneira correta de fazer isso, mas adicionei as seguintes propriedades css à tag <body>
`` `css
corpo {
posição: absoluta;
esquerda: -17px;
direita: -17px;
acolchoamento superior: 0;
padding-right: 17px;
padding-left: 17px;
padding-bottom: 0px;
overflow-x: oculto;
overflow-y: auto! important // Remova o! important se quiser que a barra de rolagem desapareça
}
`` ``
chrisshaddad
em 10 jul. 2018
Espero que isso ajude alguém:
Depois de tentar algumas substituições de css que pareciam funcionar, mas pareciam erradas, como @chrisshaddad 's, descobri que estávamos overflow-y: scroll em todo o nosso aplicativo. Tínhamos forçado a barra de rolagem do eixo y em todo o aplicativo para evitar deslocamento devido às nossas páginas terem comprimentos variados - algumas exigindo rolagem do eixo y, outras não.
Em vez de colocar um monte de body extra ou estilo embutido, pudemos corrigir a mudança isolando overflow-y: scroll do conteúdo abaixo de nossa AppBar / Cabeçalho corrigido. Agora temos uma barra de rolagem perene para o conteúdo da página, ao invés da janela inteira, junto com nenhuma mudança de modais / menus, já que a barra de rolagem é anexada ao conteúdo da página e não a body .
Para referência, nosso DOM se parece com:
<div>
<Header />
<div className="pageContent">
<div className="page">
<Route exact path="/pathToPage"> component={PageContent} />
</div>
</div>
</div>
e o CSS (a altura do nosso cabeçalho é 45px):
.pageContent {
position: absolute;
top: 45px;
left: 0;
right: 0;
bottom: 0;
}
.pageContent .page {
height: 100%;
overflow-y: scroll;
}
cvocke
em 16 jul. 2018
Olá,
Atualmente tenho o mesmo problema e devo admitir que não consigo encontrar minha felicidade em nenhuma das soluções mencionadas.
Pelo que entendi, Modal não permite o uso da barra de rolagem, o que é problemático porque eu uso um Modal para realizar uma pesquisa avançada e um Modal nem sempre precisa para ter um conteúdo curto.
Pensando no problema e nas soluções que você mencionou, gostaria de saber por que não seria possível para o Material-UI implementar uma propriedade rolável para tudo relacionado a Modal , Dialog , Menu e outros elementos pop-up. Por padrão, esta propriedade booleana seria falsa, mas poderia ser verdadeira para permitir que uma barra de rolagem fosse exibida no componente.
Se isso não for possível, talvez implemente um componente ScrollBar imediatamente, mesmo se eu preferir a ideia anterior.
Suspeito que seja mais fácil falar do que fazer. Agradeço, portanto, o trabalho excepcional que está realizando.
rememberYou
em 9 set. 2018
FWIW Acabei de definir um body { overflow-y: scroll } global e tudo parece funcionar bem.
avdd
em 9 set. 2018
@avdd Isso não ajuda, pois permitirá que você role no corpo e não no modal.
rememberYou
em 9 set. 2018
@rememberYou O modal é um primitivo de baixo nível, você pode querer usar a caixa de diálogo: https://material-ui.com/demos/dialogs/#scrolling -long-content.
oliviertassinari
em 9 set. 2018
@rememberYou ModalManager define overflow:hidden diretamente no elemento do contêiner (corpo) quando o modal está visível e o redefine quando o modal é concluído, então, sim, funciona para mim.
avdd
em 9 set. 2018
@oliviertassinari obrigado pela solução.
@avdd minhas desculpas, eu não tentei com ModalManager .
rememberYou
em 9 set. 2018
@lorensr Isso ainda é um problema?
nathanmarks
em 10 set. 2018
@oliviertassinari Uma última coisa, eu tentei com Dialog , funciona bem, mas como eu quero um design mais particular, gosto de usar Modals .
O problema é que eu tenho um Modal (Login) que tem um link para abrir um segundo Modal (SignUp) que tem um link para retornar ao Login.
Neste caso, tenho que usar ModalManager para adicionar e remover facilmente Modal ? Desculpe sair do assunto do problema, não encontrei nenhuma documentação sobre o assunto.
rememberYou
em 10 set. 2018
@nathanmarks sim, parece que as páginas de documentos de componentes modais ainda não mencionam .mui-fixed
lorensr
em 10 set. 2018
Usando 3.5.1 - o diálogo se desloca para a esquerda antes de fechar.
Reproduzível aqui https://material-ui.com/demos/dialogs/ - abra e feche a demonstração Simple Dialog.
Após o teste, isso começou na v3.3.
stephen099
em 14 nov. 2018
@ stephen099 Obrigado por relatar! Eu confirmo, mas é um problema diferente.
oliviertassinari
em 22 nov. 2018
Notei que no cabeçalho (com o último mui), mui-fixed é adicionado aos nomes das classes, mas não há nenhum estilo atribuído a ela (inspecionando o cabeçalho, não há mui-fixed regra carregada.
Eu estou me perguntando, por que isso "adicionar preenchimento" está acontecendo em primeiro lugar, por que é necessário? Para mim, está quebrado pelo componente Menu .
Como posso evitar que isso aconteça sem ter que substituir o estilo css por !important ...? obrigado
vajnorcan
em 27 fev. 2019
@vajnorcan O nome da classe mui-fixed sinaliza ao componente modal (usado pelo menu) que a posição do elemento mudará ao travar a rolagem no elemento do corpo. Compensamos a remoção da largura da barra de rolagem com um estilo de preenchimento à direita temporário. Você poderia fornecer um exemplo de reprodução mínima no CodeSandbox? Obrigado.
oliviertassinari
em 27 fev. 2019
Desculpe, onde você colocou o .mui corrigido? Eu tenho esse problema com uma seleção abrindo um menu.
capsule5
em 13 mar. 2019
@ capsule5 Você precisa adicioná-lo ao elemento que "salta" devido à barra de rolagem ser desabilitada no menu aberto (geralmente deve ser um elemento fixado à direita) e seu preenchimento será tratado por você .
Observe também que, conforme mencionado acima, pode ser necessário adicionar isso aos seus estilos globais:
.mui-fixed {
/*
* make sure that added right padding
* actually pushes contents to the left
*/
box-sizing: content-box;
}
cvara
em 22 mar. 2019
Não há reprodução neste tópico. Estou fechando
@cvara Nós acompanhamos isso no # 9275.
oliviertassinari
em 12 jul. 2019
Não entendi, está resolvido? Eu atualizei de v0.9 para v4 e agora, quando abro modais, meu conteúdo salta para a esquerda (obtendo padding-right: 17px )? Qual é a solução recomendada para isso?
Edição posterior:
Porque no meu caso eu tinha overflow-y: scroll !important; , também tive que adicionar padding-right: 0px !important; para corrigir este problema de salto.
Cristy94
em 9 nov. 2019
A maneira como eu consertei foi apenas adicionar disableScrollLock={ true } no meu componente :)
Toshiuk
em 27 nov. 2019
@Toshiuk qual componente?
wongjiahau
em 1 dez. 2019
@wongjiahau o componente Modal v4 +
sartios
em 4 dez. 2019
Você também pode adicionar disableScrollLock ao Menu
jeronimomora
em 14 dez. 2019
Isso está se reproduzindo para mim também. Adicionar disableScrollLock não é plausível, pois estou usando componentes de terceiros que adicionam itens de menu. Isso deve ser corrigido. Talvez detecte se a barra de rolagem realmente é exibida ou não.
archfz
em 14 dez. 2019
@archfz Você tem uma reprodução?
oliviertassinari
em 15 dez. 2019
Estou testemunhando isso no uso de componentes Select também. Sempre que um menu suspenso Select é aberto, overflow: hidden, padding-right: 15px é adicionado à tag principal body do meu aplicativo. Existe uma solução para isso além de modificar estilos? Eu sinto que este não é um comportamento esperado
WholemealDrop
em 17 dez. 2019
@WholemealDrop Follow # 17353.
oliviertassinari
em 17 dez. 2019
@oliviertassinari ahah aparentemente minhas habilidades de pesquisa não são tão boas. Obrigado!
WholemealDrop
em 17 dez. 2019
@oliviertassinari Consegui reduzir o problema ao núcleo. O problema parece ser que, de alguma forma, há cálculos incorretos ao exibir: flex + minHeight: 100vh + body sem preenchimento e margem combinados. Parece que o código espera haver uma barra de rolagem lá, mas na verdade não existe. Este código deve reproduzir o 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 Você poderia criar um codesandbox, por favor? (Você pode começar com um dos exemplos de documentos.)
mbrookes
em 18 dez. 2019
@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark
archfz
em 18 dez. 2019
@archfz Desculpe, perdi isso.
O que procuro aqui? Não experimento nenhuma mudança de layout.
mbrookes
em 8 jan. 2020
@archfz Desculpe, perdi isso.
O que procuro aqui? Não experimento nenhuma mudança de layout.
Quando você clica no caractere no canto superior direito, ele se move para a esquerda quando o item de menu é aberto e depois volta para a direita quando o item de menu é fechado.
WholemealDrop
em 8 jan. 2020
Você poderia abrir uma nova edição? Parece algo novo.
oliviertassinari
em 8 jan. 2020
@archfz Ok, é um conflito com a dica de ferramenta. Vamos ignorar.
oliviertassinari
em 11 jan. 2020
@oliviertassinari Bem, não devemos ignorar isso porque é um problema real. O React-admin usa IU material e, na verdade, é um problema pronto para uso. Eu criei um problema aqui https://github.com/mui-org/material-ui/issues/19203
archfz
em 12 jan. 2020
A solução reiterada por
Menu, StyledMenu:
disableScrollLock={ true }Selecione:
MenuProps={{ disableScrollLock: true }}
Precisamos mesmo tornar as soluções mais fáceis de encontrar! :-)
samheyman
em 1 mar. 2020
Tenho problemas com a cor de fundo da barra de ferramentas quando abro o menu e a barra de rolagem fica invisível
aqui está um exemplo:
https://codesandbox.io/s/material-demo-nj80l
conhece alguém como isso conserta?
Risbot
em 9 mar. 2020
apenas adicione o seguinte css
body {padding-right: 0px! important; }
sandunr
em 11 abr. 2020
Olá, no meu aplicativo eu uso essa solução.
Eu adiciono disableScrollLock={true} disablePortal={true} id="custom" no meu componente <Menu> e no meu css
#custom {
.MuiPopover-paper,
.MuiPopover-paper {
max-height: inherit !important;
}
}
isso funciona perfeitamente no meu caso. Espero que esses truques possam ajudar.
Vincent-Alibert
em 22 abr. 2020
Tive os mesmos problemas ao trabalhar com Diálogos. A seguir, a única solução que experimentei, que remove a mudança de conteúdo e ainda bloqueia a rolagem da página subjacente / remove sua barra de rolagem.
Solução:
Vá para o div do contêiner externo ou qualquer div externo (qualquer contêiner que encapsula todo o seu aplicativo) em seu aplicativo e defina sua largura como:
width: calc(100vw - 1px);
1px pode ser substituído por 34px ou qualquer outro valor baixo. Isso fará com que a abertura de uma caixa de diálogo oculte a barra de rolagem da página subjacente, se presente, e não crie qualquer tipo de mudança na posição do conteúdo. A rolagem ainda está bloqueada para a página subjacente e a rolagem ainda é possível para sua caixa de diálogo.
fastlogin
em 18 mai. 2020
disableScrollLock = {true}
Você é simplesmente brilhante, obrigado
cy-sachin-m
em 25 ago. 2020
Questões relacionadas
mb-copart
·
3Comentários
pola88
·
3Comentários
ghost
·
3Comentários
TimoRuetten
·
3Comentários
newoga
·
3Comentários
Comentários muito úteis
A maneira como eu consertei foi apenas adicionar
disableScrollLock={ true }no meu componente :)