Material-ui: [Modal] Problem mit der Bildlaufleiste und dem Auffüllen
Wenn ein Menu geöffnet wird, verschwindet die Bildlaufleiste der Seite. Dies kann sich auf das Seitenlayout auswirken. In meinem Fall springt alles nach rechts, was ein visueller Fehler ist.
Lösung
Entweder A) das Problem in der Bibliothek beheben oder B) dieses Verhalten in den Dokumenten notieren und Möglichkeiten zur Lösung bereitstellen:
https://material-ui-next.com/demos/menus/
Der Container für die springenden Dinge ist absolute, left: 0, right: 0 , mit Abschnitten, die entweder text-align: center oder display: flex; flex-direction: column; align-items: center;
Ihre Umgebung
| Tech | Version |
| -------------- | --------- |
| Material-UI | 1.0.0-beta.29 |
Verwandte Themen
Diese sind alle geschlossen, und ich habe darin keine Lösung gefunden:
8475 # 7431 # 6656 # 8710
lorensr
Alle 47 Kommentare
In meinem Fall springt alles nach rechts, was ein visueller Fehler ist.
@lorensr Hast du ein Reproduktionsbeispiel? Es ist eine bekannte Einschränkung beim Deaktivieren der Bildlaufleiste. Wir behandeln absolut positionierte Elemente mit dem Klassennamen .mui-fixed .
Wir müssen es dokumentieren!
oliviertassinari
am 23. Jan. 2018
Zu Ihrer Information, eine andere Sache, die ich gefunden habe, ist, dass das .mui-fixed Fix nur funktioniert, wenn Ihr festes Element auch hat
box-sizing: content-box;
pelotom
am 23. Jan. 2018
Danke, das Hinzufügen der Klasse hat funktioniert. Ich brauchte content-box . Das Element ist border-box .
Es sollte auch beachtet werden, dass beim Entfernen der Bildlaufleiste der Blockkopf in meinem right: 0 -Element nicht bis zum rechten Rand des Browsers reicht.
Behoben durch Ändern von right: -20px , also ist CSS jetzt:
main {
position: absolute;
box-sizing: border-box;
left: 0;
right: -20px;
overflow-x: hidden;
}
Der Nachteil ist, dass zentrierte Kinder, wenn die Bildlaufleiste vorhanden ist, jetzt 10 Pixel rechts von der Mitte sind und ich den Überlauf ausblenden muss.
lorensr
am 25. Jan. 2018
In einigen Fällen ist es nicht möglich, die mui-feste CSS-Klasse auf einige feste Elemente anzuwenden. Zum Beispiel das gestochen scharfe Chat-Widget am Ende meiner Seite. Wahrscheinlich passiert das auch mit dem Intercom-Widget.
Hat jemand das gleiche Problem und hat eine Lösung gefunden?
abhishiv
am 16. März 2018
Ich hatte ein ähnliches Problem, aber der Container war nicht absolut. Was es für mich behoben hat, war das Hinzufügen von !important zu meiner Polsterung wie folgt:
padding: 0 !important;
michielglibert
am 5. Juni 2018
Ich bin nicht 100% sicher, ob dies der richtige Weg ist, aber ich habe dem <body> -Tag die folgenden CSS-Eigenschaften hinzugefügt
`` `css
Körper {
Position: absolut;
links: -17px;
rechts: -17px;
Polsterung oben: 0;
Polsterung rechts: 17px;
Polsterung links: 17px;
Polsterung unten: 0px;
Überlauf-x: versteckt;
overflow-y: auto! wichtig // Entferne das! wichtige, wenn die Bildlaufleiste verschwinden soll
}}
`` ``
chrisshaddad
am 10. Juli 2018
Hoffentlich hilft das jemand anderem:
Nachdem ich verschiedene CSS-Überschreibungen ausprobiert hatte, die zu funktionieren schienen, sich aber falsch anfühlten, wie z. B. @chrisshaddads , stellte ich fest, dass wir uns verschoben haben, weil wir zuvor overflow-y: scroll für unsere gesamte App erzwungen hatten . Wir hatten die App-Breite der y-Achsen-Bildlaufleiste erzwungen, um ein Verschieben zu verhindern, da unsere Seiten unterschiedlich lang sind - einige erfordern einen Bildlauf auf der y-Achse, andere nicht.
Anstatt ein paar zusätzliche body oder Inline-Stile zu platzieren, konnten wir die Verschiebung beheben, indem wir die overflow-y: scroll auf den Inhalt unter unserer festen AppBar / Header isolierten. Jetzt haben wir eine immergrüne Bildlaufleiste für den Seiteninhalt und nicht für das gesamte Fenster, ohne dass von Modalitäten / Menüs gewechselt werden muss, da die Bildlaufleiste an den Seiteninhalt angehängt ist und nicht an die body .
Als Referenz sieht unser DOM so aus:
<div>
<Header />
<div className="pageContent">
<div className="page">
<Route exact path="/pathToPage"> component={PageContent} />
</div>
</div>
</div>
und das CSS (die Höhe unseres Headers beträgt 45px):
.pageContent {
position: absolute;
top: 45px;
left: 0;
right: 0;
bottom: 0;
}
.pageContent .page {
height: 100%;
overflow-y: scroll;
}
cvocke
am 16. Juli 2018
Hallo,
Ich habe derzeit das gleiche Problem und ich muss zugeben, dass ich in keiner der genannten Lösungen mein Glück finden kann.
Soweit ich verstanden habe, erlaubt Modal nicht die Verwendung der Bildlaufleiste, was problematisch ist, da ich ein Modal , um eine erweiterte Suche durchzuführen, und ein Modal nicht immer benötigt einen kurzen Inhalt haben.
Als ich über das Problem und die von Ihnen erwähnten Lösungen nachdachte, fragte ich mich, warum es Material-UI nicht möglich sein würde, eine scrollbare Eigenschaft für alles zu implementieren, was mit Modal , Dialog , Menu und andere Popup-Elemente. Standardmäßig ist diese boolesche Eigenschaft false, kann jedoch true sein, damit eine Bildlaufleiste in der Komponente angezeigt werden kann.
Wenn dies nicht möglich ist, implementieren Sie möglicherweise eine ScrollBar -Komponente direkt, auch wenn ich die Idee vorher bevorzuge.
Ich vermute, dass dies leichter gesagt als getan ist. Ich möchte mich daher bei Ihnen für die außergewöhnliche Arbeit bedanken, die Sie leisten.
rememberYou
am 9. Sept. 2018
FWIW Ich habe gerade ein globales body { overflow-y: scroll } und alles scheint gut zu funktionieren.
avdd
am 9. Sept. 2018
@avdd Dies hilft nicht, da Sie damit im Körper und nicht im Modal scrollen können.
rememberYou
am 9. Sept. 2018
@rememberYou Das Modal ist ein https://material-ui.com/demos/dialogs/#scrolling -long-content.
oliviertassinari
am 9. Sept. 2018
@rememberYou ModalManager setzt overflow:hidden direkt auf das Containerelement (body), wenn das Modal sichtbar ist, und setzt es zurück, wenn das Modal fertig ist. Ja, es funktioniert bei mir.
avdd
am 9. Sept. 2018
@oliviertassinari danke für die Lösung.
@avdd Ich entschuldige mich, ich habe es nicht mit dem ModalManager versucht.
rememberYou
am 9. Sept. 2018
@lorensr Ist das noch ein Problem?
nathanmarks
am 10. Sept. 2018
@oliviertassinari Eine letzte Sache, die ich mit dem Dialog versucht habe, funktioniert gut, aber da ich ein spezielleres Design möchte, verwende ich gerne das Modals .
Das Problem ist, dass ich ein Modal (Login) habe, das einen Link zum Öffnen eines zweiten Modal (SignUp) hat, der selbst einen Link zum Zurückkehren zum Login hat.
Muss ich in diesem Fall die ModalManager um einfach ein Modal hinzuzufügen und zu entfernen? Es tut mir leid, dass ich aus dem Thema herausgekommen bin. Ich habe keine Dokumentation zu diesem Thema gefunden.
rememberYou
am 10. Sept. 2018
@nathanmarks ja, es sieht so aus, als würden auf den Dokumentenseiten für modale Komponenten .mui-fixed immer noch nicht erwähnt
lorensr
am 10. Sept. 2018
Mit 3.5.1 wird der Dialog vor dem Schließen nach links verschoben.
Hier reproduzierbar https://material-ui.com/demos/dialogs/ - Öffnen und schließen Sie die Simple Dialog-Demo.
Nach dem Testen wurde dies in Version 3.3 gestartet.
stephen099
am 14. Nov. 2018
@ stephen099 Vielen Dank für die Berichterstattung! Ich bestätige, aber es ist ein anderes Problem.
oliviertassinari
am 22. Nov. 2018
Ich habe festgestellt, dass in der Kopfzeile (mit dem neuesten Mui) mui-fixed zu den Klassennamen hinzugefügt wird, aber kein Stil zugewiesen ist (durch Überprüfen der Kopfzeile gibt es keine mui-fixed Regel geladen.
Ich frage mich, warum dieses "Hinzufügen von Polstern" überhaupt stattfindet, warum es benötigt wird. Für mich ist es durch die Menu -Komponente kaputt.
Wie kann ich dies verhindern, ohne das CSS-Styling mit !important ... überschreiben zu müssen? Vielen Dank
vajnorcan
am 27. Feb. 2019
@vajnorcan Der mui-fixed signalisiert der modalen Komponente (die vom Menü verwendet wird), dass sich die Elementposition ändert, wenn der Bildlauf auf dem Körperelement gesperrt wird. Wir kompensieren das Entfernen der Bildlaufleistenbreite durch einen temporären Auffüllstil. Könnten Sie ein Beispiel für eine minimale Reproduktion in CodeSandbox bereitstellen? Vielen Dank.
oliviertassinari
am 27. Feb. 2019
Entschuldigung, wo legst du die .mui-Fixed hin? Ich habe dieses Problem mit einer Auswahl, die ein Menü öffnet.
capsule5
am 13. März 2019
@ capsule5 Sie müssen es dem Element hinzufügen, das "springt", da die Bildlaufleiste beim Öffnen des Menüs deaktiviert ist (normalerweise sollte dies ein rechts fixiertes Element sein), und die Auffüllung wird für Sie erledigt .
Beachten Sie auch, dass Sie, wie oben erwähnt, dies möglicherweise zu Ihren globalen Stilen hinzufügen müssen:
.mui-fixed {
/*
* make sure that added right padding
* actually pushes contents to the left
*/
box-sizing: content-box;
}
cvara
am 22. März 2019
In diesem Thread gibt es keine Reproduktion. Ich schließe.
@cvara Wir verfolgen es in # 9275.
oliviertassinari
am 12. Juli 2019
Ich verstehe es nicht, ist das gelöst? Ich habe ein Upgrade von v0.9 auf v4 durchgeführt und jetzt, wenn ich Modals öffne, springt mein Inhalt nach links ( padding-right: 17px )? Was ist die empfohlene Lösung dafür?
Später bearbeiten:
Da ich in meinem Fall overflow-y: scroll !important; hatte, musste ich auch padding-right: 0px !important; hinzufügen, um dieses Sprungproblem zu beheben.
Cristy94
am 9. Nov. 2019
Die Art und Weise, wie ich es behoben habe, war einfach disableScrollLock={ true } in meine Komponente einzufügen :)
Toshiuk
am 27. Nov. 2019
@Toshiuk welche Komponente?
wongjiahau
am 1. Dez. 2019
@wongjiahau die
sartios
am 4. Dez. 2019
Sie können dem Menü auch disableScrollLock hinzufügen
jeronimomora
am 14. Dez. 2019
Dies reproduziert sich auch für mich. Das Hinzufügen von disableScrollLock ist nicht plausibel, da ich Komponenten von Drittanbietern verwende, die die Menüelemente hinzufügen. Dies sollte behoben werden. Stellen Sie möglicherweise fest, dass die Bildlaufleiste tatsächlich angezeigt wird oder nicht.
archfz
am 14. Dez. 2019
@archfz Hast du eine Reproduktion?
oliviertassinari
am 15. Dez. 2019
Ich sehe dies auch bei der Verwendung von Select -Komponenten. Immer wenn ein Dropdown-Menü Select geöffnet wird, wird overflow: hidden, padding-right: 15px zum Haupt-Tag body meiner App hinzugefügt. Gibt es eine Lösung neben dem Überschreiben von Stilen? Ich habe das Gefühl, dass dies kein erwartetes Verhalten ist
WholemealDrop
am 17. Dez. 2019
@WholemealDrop Folgen Sie # 17353.
oliviertassinari
am 17. Dez. 2019
@oliviertassinari ahah anscheinend sind meine Suchfähigkeiten nicht so toll. Vielen Dank!
WholemealDrop
am 17. Dez. 2019
@oliviertassinari Ich habe es geschafft, das Problem auf den Kern zu reduzieren. Das Problem scheint zu sein, dass es bei der Anzeige irgendwie falsche Berechnungen gibt: flex + minHeight: 100vh + body keine Polsterung und kein Rand kombiniert. Es scheint, dass der Code erwartet, dass es dort eine Bildlaufleiste gibt, aber tatsächlich gibt es keine. Dieser Code sollte das Problem reproduzieren.
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 Könnten Sie bitte eine Codesandbox erstellen? (Sie können mit einem der Dokumentbeispiele beginnen.)
mbrookes
am 18. Dez. 2019
@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark
archfz
am 18. Dez. 2019
@archfz Sorry, habe das verpasst.
Was suche ich hier? Ich habe keine Layoutänderungen.
mbrookes
am 8. Jan. 2020
@archfz Sorry, habe das verpasst.
Was suche ich hier? Ich habe keine Layoutänderungen.
Wenn Sie auf das Zeichen oben rechts klicken, wird es beim Öffnen des Menüelements nach links und beim Schließen des Menüelements nach rechts verschoben.
WholemealDrop
am 8. Jan. 2020
Könnten Sie eine neue Ausgabe eröffnen? Es scheint etwas Neues zu sein.
oliviertassinari
am 8. Jan. 2020
@archfz Ok, es ist ein Konflikt mit dem Tooltip. Lass es uns ignorieren.
oliviertassinari
am 11. Jan. 2020
@oliviertassinari Nun, wir sollten es nicht ignorieren, weil es ein echtes Problem ist. React-admin verwendet die Material-Benutzeroberfläche und ist ein sofort einsatzbereites Problem. Ich habe hier ein Problem erstellt: https://github.com/mui-org/material-ui/issues/19203
archfz
am 12. Jan. 2020
Die von @Toshiuk wiederholte
Menü, StyledMenu:
disableScrollLock={ true }Wählen:
MenuProps={{ disableScrollLock: true }}
Wir müssen wirklich Lösungen leichter auffindbar machen! :-)
samheyman
am 1. März 2020
Ich habe ein Problem mit der Hintergrundfarbe der Symbolleiste, wenn ich das Menü öffne und die Bildlaufleiste unsichtbar wird
Hier ist ein Beispiel:
https://codesandbox.io/s/material-demo-nj80l
Kennen Sie jemanden, wie es repariert?
Risbot
am 9. März 2020
Fügen Sie einfach das folgende CSS hinzu
Körper {Polsterung rechts: 0px! wichtig; }}
sandunr
am 11. Apr. 2020
Hallo, in meiner App verwende ich diese Lösung.
Ich füge disableScrollLock={true} disablePortal={true} id="custom" zu meiner Komponente <Menu> und zu meinem CSS hinzu
#custom {
.MuiPopover-paper,
.MuiPopover-paper {
max-height: inherit !important;
}
}
Das funktioniert in meinem Fall perfekt. Ich hoffe diese Tricks können helfen.
Vincent-Alibert
am 22. Apr. 2020
Ich hatte die gleichen Probleme bei der Arbeit mit Dialogen. Das Folgende ist die einzige Lösung, die ich versucht habe, die sowohl das Verschieben von Inhalten entfernt als auch den Bildlauf der zugrunde liegenden Seite sperrt / deren Bildlaufleiste entfernt.
Lösung:
Gehen Sie in Ihrer App zum äußersten Container-Div oder zum äußersten Container-Div (jeder Container, der Ihre gesamte App kapselt) und stellen Sie die Breite auf Folgendes ein:
width: calc(100vw - 1px);
1px kann durch 34px oder einen anderen niedrigen Wert ersetzt werden. Dadurch wird beim Öffnen eines Dialogfelds die Bildlaufleiste der zugrunde liegenden Seite ausgeblendet, sofern vorhanden, und die Position des Inhalts wird nicht verschoben. Das Scrollen ist für die zugrunde liegende Seite weiterhin gesperrt, und das Scrollen ist für Ihren Dialog weiterhin möglich.
fastlogin
am 18. Mai 2020
disableScrollLock = {true}
Du bist einfach genial, danke
cy-sachin-m
am 25. Aug. 2020
Verwandte Themen
Bessonov
·
93Kommentare
kybarg
·
164Kommentare
tleunen
·
59Kommentare
cfilipov
·
55Kommentare
aranw
·
95Kommentare
Hilfreichster Kommentar
Die Art und Weise, wie ich es behoben habe, war einfach
disableScrollLock={ true }in meine Komponente einzufügen :)