Material-ui: [Modal] Problème de barre de défilement et de remplissage
Lorsqu'un Menu s'ouvre, la barre de défilement de la page disparaît. Cela peut affecter la mise en page. Dans mon cas, tout saute vers la droite, ce qui est un bug visuel.
Solution
Soit A) corrigez cela dans la bibliothèque, soit B) Notez ce comportement dans la documentation et fournissez des moyens de le résoudre:
https://material-ui-next.com/demos/menus/
Le conteneur pour les choses qui sautent est absolute, left: 0, right: 0 , avec des sections qui sont soit text-align: center ou display: flex; flex-direction: column; align-items: center;
Votre environnement
| Tech | Version |
| -------------- | --------- |
| Material-UI | 1.0.0-beta.29 |
Problèmes liés
Ceux-ci sont tous fermés et je n'y ai pas trouvé la solution:
8475 # 7431 # 6656 # 8710
lorensr
Tous les 47 commentaires
Dans mon cas, tout saute vers la droite, ce qui est un bug visuel.
@lorensr Avez-vous un exemple de reproduction? C'est une limitation bien connue de la désactivation de la barre de défilement. Nous gérons les éléments positionnés absolus qui ont le nom de classe .mui-fixed .
Nous devons le documenter!
oliviertassinari
le 23 janv. 2018
Pour info, une autre chose que j'ai trouvée est que le correctif .mui-fixed ne fonctionne que si votre élément fixe a également
box-sizing: content-box;
pelotom
le 23 janv. 2018
Merci, l'ajout de la classe a fonctionné. Je n'avais pas besoin de content-box . L'élément est border-box .
Il convient également de noter que lorsque la barre de défilement est supprimée, l'en-tête de bloc à l'intérieur de mon élément right: 0 ne s'étirait pas jusqu'au bord droit du navigateur.
Corrigé en changeant right: -20px , donc maintenant css est:
main {
position: absolute;
box-sizing: border-box;
left: 0;
right: -20px;
overflow-x: hidden;
}
L'inconvénient est que lorsque la barre de défilement est présente, les enfants centrés sont maintenant à 10 pixels à droite du centre, et je dois masquer le débordement.
lorensr
le 25 janv. 2018
Dans certains cas, il n'est pas possible d'appliquer la classe css mui-fixed à certains éléments fixes. Par exemple, le widget de chat net en bas de ma page. Cela se produit probablement également avec le widget d'interphone.
Quelqu'un d'autre a-t-il le même problème et a-t-il trouvé une solution?
abhishiv
le 16 mars 2018
J'ai eu un problème similaire, mais le conteneur n'était pas absolu. Ce qui a résolu le problème pour moi a été d'ajouter !important à mon remplissage comme ceci:
padding: 0 !important;
michielglibert
le 5 juin 2018
Je ne suis pas sûr à 100% si c'est la bonne façon de le faire, mais j'ai ajouté les propriétés css suivantes à la balise <body>
`` css
corps {
position: absolue;
gauche: -17px;
à droite: -17px;
rembourrage haut: 0;
padding-right: 17px;
padding-left: 17px;
padding-bottom: 0px;
overflow-x: caché;
overflow-y: auto! important // Supprimez le! important si vous voulez que la barre de défilement disparaisse
}
`` ``
chrisshaddad
le 10 juil. 2018
Espérons que cela aide quelqu'un d'autre:
Après avoir essayé plusieurs remplacements css qui semblaient fonctionner mais qui semblaient faux, comme ceux de @chrisshaddad , j'ai trouvé que nous devions changer de place en raison du forçage de overflow-y: scroll sur toute notre application. Nous avions forcé la barre de défilement de l'axe y à l'échelle de l'application pour empêcher le décalage en raison de la longueur variable de nos pages - certaines nécessitant un défilement sur l'axe des y, d'autres non.
Au lieu de placer un tas de body supplémentaires ou de style en ligne, nous avons pu corriger le décalage en isolant le overflow-y: scroll au contenu sous notre AppBar / Header fixe. Maintenant, nous avons une barre de défilement permanente pour le contenu de la page, plutôt que pour la fenêtre entière, sans décalage des modaux / menus puisque la barre de défilement est attachée au contenu de la page et non au body .
Pour référence, notre DOM ressemble à:
<div>
<Header />
<div className="pageContent">
<div className="page">
<Route exact path="/pathToPage"> component={PageContent} />
</div>
</div>
</div>
et le CSS (la hauteur de notre en-tête est de 45px):
.pageContent {
position: absolute;
top: 45px;
left: 0;
right: 0;
bottom: 0;
}
.pageContent .page {
height: 100%;
overflow-y: scroll;
}
cvocke
le 16 juil. 2018
Bonjour,
J'ai actuellement ce même problème et je dois avouer que je ne trouve mon bonheur dans aucune des solutions évoquées.
D'après ce que j'ai compris, Modal ne permet pas d'utiliser la barre de défilement, ce qui est problématique car j'utilise un Modal pour effectuer une recherche avancée et un Modal n'a pas toujours besoin d'avoir un contenu court.
En réfléchissant au problème et aux solutions que vous avez mentionnées, je me demandais pourquoi il ne serait pas possible pour Material-UI d'implémenter une propriété scrollable pour tout ce qui concerne Modal , Dialog , Menu et autres éléments contextuels. Par défaut, cette propriété booléenne serait fausse, mais pourrait être vraie pour permettre à une barre de défilement d'être affichée dans le composant.
Si ce n'est pas possible, implémentez peut-être un composant ScrollBar , même si je préfère l'idée avant.
Je soupçonne que c'est plus facile à dire qu'à faire. Je voudrais donc vous remercier pour le travail exceptionnel que vous accomplissez.
rememberYou
le 9 sept. 2018
FWIW Je viens de définir un body { overflow-y: scroll } global et tout semble bien fonctionner.
avdd
le 9 sept. 2018
@avdd Cela n'aide pas car cela vous permettra de faire défiler dans le corps et non dans le modal.
rememberYou
le 9 sept. 2018
@rememberYou Le modal est une primitive de bas niveau, vous pouvez utiliser la boîte de dialogue à la place: https://material-ui.com/demos/dialogs/#scrolling -long-content.
oliviertassinari
le 9 sept. 2018
@rememberYou ModalManager définit overflow:hidden directement sur l'élément conteneur (corps) lorsque le modal est visible et le réinitialise lorsque le modal est terminé, donc, oui, cela fonctionne pour moi.
avdd
le 9 sept. 2018
@oliviertassinari merci pour la solution.
@avdd mes excuses, je n'ai pas essayé avec le ModalManager .
rememberYou
le 9 sept. 2018
@lorensr Est-ce toujours un problème?
nathanmarks
le 10 sept. 2018
@oliviertassinari Une dernière chose, j'ai essayé avec le Dialog , ça marche bien, mais comme je veux un design plus particulier, j'aime utiliser le Modals .
Le problème est que j'ai un Modal (Login) qui a un lien pour ouvrir un deuxième Modal (SignUp) qui lui-même a un lien pour revenir à la connexion.
Dans ce cas, dois-je utiliser le ModalManager pour ajouter et supprimer facilement un Modal ? Désolé de sortir du sujet du problème, je n'ai trouvé aucune documentation sur le sujet.
rememberYou
le 10 sept. 2018
@nathanmarks oui, on dirait que les pages de documentation des composants modaux ne mentionnent toujours pas .mui-fixed
lorensr
le 10 sept. 2018
En utilisant 3.5.1 - la boîte de dialogue se déplace vers la gauche avant de se fermer.
Reproductible ici https://material-ui.com/demos/dialogs/ - ouvre et ferme la démo Simple Dialog.
Après les tests, cela a commencé dans la v3.3.
stephen099
le 14 nov. 2018
@ stephen099 Merci d'avoir signalé! Je confirme, mais c'est un problème différent.
oliviertassinari
le 22 nov. 2018
J'ai remarqué que sur l'en-tête (avec le dernier mui), le mui-fixed est ajouté aux noms de classe, mais aucun style ne lui est attribué (en inspectant l'en-tête, il n'y a pas de mui-fixed règle chargée.
Je me demande, pourquoi est-ce que cet 'ajout de remplissage' se produit en premier lieu, pourquoi est-il nécessaire? Pour moi, c'est cassé par le composant Menu .
Comment éviter que cela ne se produise sans avoir à remplacer le style css par !important ...? Merci
vajnorcan
le 27 févr. 2019
@vajnorcan Le nom de classe mui-fixed signale au composant modal (utilisé par le menu) que la position de l'élément changera lors du verrouillage du défilement sur l'élément body. Nous compensons la suppression de la largeur de la barre de défilement avec un style de remplissage temporaire à droite. Pourriez-vous fournir un exemple de reproduction minimale sur CodeSandbox? Je vous remercie.
oliviertassinari
le 27 févr. 2019
Désolé, où mettez-vous le .mui-fixed? J'ai ce problème avec une sélection ouvrant un menu.
capsule5
le 13 mars 2019
@ capsule5 Vous devez l'ajouter à l'élément qui "saute" en raison de la désactivation de la barre de défilement à l'ouverture du menu (généralement, cela devrait être un élément fixé à droite) et son remplissage sera géré pour vous .
Notez également que, comme mentionné ci-dessus, vous devrez peut-être ajouter ceci à vos styles globaux:
.mui-fixed {
/*
* make sure that added right padding
* actually pushes contents to the left
*/
box-sizing: content-box;
}
cvara
le 22 mars 2019
Il n'y a pas de reproduction dans ce fil. Je ferme.
@cvara Nous en gardons une trace dans # 9275.
oliviertassinari
le 12 juil. 2019
Je ne comprends pas, est-ce résolu? J'ai mis à niveau de la v0.9 à la v4 et maintenant, lorsque j'ouvre les modals, mon contenu saute vers la gauche (obtenant padding-right: 17px )? Quelle est la solution recommandée pour cela?
Modifier plus tard:
Parce que dans mon cas, j'avais overflow-y: scroll !important; j'ai également dû ajouter padding-right: 0px !important; pour résoudre ce problème de saut.
Cristy94
le 9 nov. 2019
La façon dont je l'ai corrigé était simplement d'ajouter disableScrollLock={ true } dans mon composant :)
Toshiuk
le 27 nov. 2019
@Toshiuk quel composant?
wongjiahau
le 1 déc. 2019
@wongjiahau le composant Modal v4 +
sartios
le 4 déc. 2019
Vous pouvez également ajouter disableScrollLock au menu
jeronimomora
le 14 déc. 2019
Cela me reproduit également. L'ajout de disableScrollLock n'est pas plausible car j'utilise des composants tiers qui ajoutent les éléments de menu. Cela devrait être corrigé. Détecter peut-être que la barre de défilement s'affiche ou non.
archfz
le 14 déc. 2019
@archfz Avez-vous une reproduction?
oliviertassinari
le 15 déc. 2019
J'en suis également témoin lors de l'utilisation de composants Select . Chaque fois qu'une liste déroulante Select est ouverte, overflow: hidden, padding-right: 15px est ajouté à la balise principale body de mon application. Existe-t-il une solution à cela en plus de remplacer les styles? J'ai l'impression que ce n'est pas un comportement attendu
WholemealDrop
le 17 déc. 2019
@WholemealDrop Suivez le # 17353.
oliviertassinari
le 17 déc. 2019
@oliviertassinari ahah apparemment mes compétences en recherche ne sont pas si bonnes. Je vous remercie!
WholemealDrop
le 17 déc. 2019
@oliviertassinari J'ai réussi à réduire le problème au cœur. Le problème semble être que, d'une manière ou d'une autre, il y a des calculs incorrects lors de l'affichage: flex + minHeight: 100vh + body aucun rembourrage et marge sont combinés. Il semble que le code s'attende à y avoir une barre de défilement mais en fait il n'y en a pas. Ce code doit reproduire le problème.
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 Pourriez-vous créer un codeandbox s'il vous plaît? (Vous pouvez commencer par l'un des exemples de la documentation.)
mbrookes
le 18 déc. 2019
@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark
archfz
le 18 déc. 2019
@archfz Désolé,
Qu'est-ce que je cherche ici? Je ne subis aucun changement de mise en page.
mbrookes
le 8 janv. 2020
@archfz Désolé,
Qu'est-ce que je cherche ici? Je ne subis aucun changement de mise en page.
Lorsque vous cliquez sur le caractère en haut à droite, il se déplace vers la gauche lorsque l'élément de menu s'ouvre, puis revient vers la droite lorsque l'élément de menu se ferme.
WholemealDrop
le 8 janv. 2020
Pouvez-vous ouvrir un nouveau numéro? Cela semble quelque chose de nouveau.
oliviertassinari
le 8 janv. 2020
@archfz Ok, c'est un conflit avec l'info-bulle. Ignorons-le.
oliviertassinari
le 11 janv. 2020
@oliviertassinari Eh bien, nous ne devons pas l'ignorer car c'est un vrai problème. React-admin utilise l'interface utilisateur matérielle et c'est en fait un problème prêt à l'emploi. J'ai créé un problème ici https://github.com/mui-org/material-ui/issues/19203
archfz
le 12 janv. 2020
La solution réitérée par
Menu, StyledMenu:
disableScrollLock={ true }Sélectionner:
MenuProps={{ disableScrollLock: true }}
Nous devons vraiment rendre les solutions plus faciles à trouver! :-)
samheyman
le 1 mars 2020
J'ai un problème avec la couleur d'arrière-plan de la barre d'outils lorsque j'ouvre le menu et que la barre de défilement devient invisible
voici un exemple:
https://codesandbox.io/s/material-demo-nj80l
savez-vous comment ça se résout?
Risbot
le 9 mars 2020
ajoutez simplement le css suivant
body {padding-right: 0px! important; }
sandunr
le 11 avr. 2020
bonjour, dans mon application, j'utilise cette solution.
J'ajoute disableScrollLock={true} disablePortal={true} id="custom" sur mon composant <Menu> et dans mon css
#custom {
.MuiPopover-paper,
.MuiPopover-paper {
max-height: inherit !important;
}
}
cela fonctionne parfaitement dans mon cas. J'espère que ces astuces peuvent vous aider.
Vincent-Alibert
le 22 avr. 2020
J'ai rencontré les mêmes problèmes en travaillant avec Dialogs. Ce qui suit est la seule solution que j'ai essayée qui supprime à la fois le décalage du contenu et verrouille toujours le défilement de la page sous-jacente / supprime sa barre de défilement.
Solution:
Accédez à la division de conteneur la plus externe ou à toute division la plus externe (tout conteneur qui encapsule l'ensemble de votre application) dans votre application et définissez sa largeur sur ceci:
width: calc(100vw - 1px);
1px peut être remplacé par 34px ou toute autre valeur faible. Cela fera en sorte que l'ouverture d'une boîte de dialogue masquera la barre de défilement de la page sous-jacente, si elle est présente, et ne créera aucune sorte de décalage dans la position du contenu. Le défilement est toujours verrouillé pour la page sous-jacente et le défilement est toujours possible pour votre boîte de dialogue.
fastlogin
le 18 mai 2020
disableScrollLock = {true}
Tu es juste génial, merci
cy-sachin-m
le 25 août 2020
Questions connexes
newoga
·
3Commentaires
ryanflorence
·
3Commentaires
mattmiddlesworth
·
3Commentaires
zabojad
·
3Commentaires
ghost
·
3Commentaires
Commentaire le plus utile
La façon dont je l'ai corrigé était simplement d'ajouter
disableScrollLock={ true }dans mon composant :)