Material-ui: [Modal] Masalah scrollbar dan padding
Saat Menu terbuka, scrollbar halaman menghilang. Ini dapat mempengaruhi tata letak halaman. Dalam kasus saya, itu melompati semuanya ke kanan, yang merupakan bug visual.
Larutan
Baik A) perbaiki ini di perpustakaan, atau B) Catat perilaku ini di dokumen, dan berikan cara untuk mengatasinya:
https://material-ui-next.com/demos/menus/
Wadah untuk hal-hal yang melompat adalah absolute, left: 0, right: 0 , dengan bagian yang bisa text-align: center atau display: flex; flex-direction: column; align-items: center;
Lingkungan Anda
| Teknologi | Versi |
| -------------- | --------- |
| Materi-UI | 1.0.0-beta.29 |
Masalah terkait
Ini semua ditutup, dan saya tidak menemukan solusi di dalamnya:
8475 # 7431 # 6656 # 8710
lorensr
Semua 47 komentar
Dalam kasus saya, itu melompati semuanya ke kanan, yang merupakan bug visual.
@lorensr Apakah Anda memiliki contoh reproduksi? Ini adalah batasan terkenal untuk menonaktifkan scrollbar. Kami menangani elemen posisi absolut yang memiliki nama kelas .mui-fixed .
Kita perlu mendokumentasikannya!
oliviertassinari
pada 23 Jan 2018
FYI, hal lain yang saya temukan adalah bahwa .mui-fixed fix hanya berfungsi jika elemen tetap Anda juga memiliki
box-sizing: content-box;
pelotom
pada 23 Jan 2018
Terima kasih, menambahkan kelas berhasil. Saya tidak membutuhkan content-box . Elemennya adalah border-box .
Perlu juga dicatat bahwa ketika bilah gulir dihapus, header blok di dalam elemen right: 0 saya tidak meregang ke tepi kanan browser.
Diperbaiki dengan mengubah right: -20px , jadi sekarang css adalah:
main {
position: absolute;
box-sizing: border-box;
left: 0;
right: -20px;
overflow-x: hidden;
}
Kelemahannya adalah ketika scrollbar ada, anak-anak yang berada di tengah sekarang 10 piksel ke kanan tengah, dan saya harus menyembunyikan overflow.
lorensr
pada 25 Jan 2018
Dalam beberapa kasus, tidak mungkin menerapkan kelas css mui-fixed ke beberapa elemen tetap. Misalnya widget obrolan segar di bagian bawah halaman saya. Mungkin terjadi dengan widget interkom juga.
Apakah ada orang lain yang memiliki masalah yang sama dan menemukan solusinya?
abhishiv
pada 16 Mar 2018
Saya memiliki masalah serupa, tetapi wadahnya tidak mutlak. Yang memperbaikinya untuk saya adalah menambahkan !important ke padding saya seperti ini:
padding: 0 !important;
michielglibert
pada 5 Jun 2018
Saya tidak 100% yakin apakah ini cara yang benar untuk melakukannya tetapi saya menambahkan properti css berikut ke tag <body>
`` css
tubuh {
posisi: mutlak;
kiri: -17px;
kanan: -17px;
padding-top: 0;
padding-right: 17px;
padding-left: 17px;
padding-bottom: 0px;
overflow-x: tersembunyi;
overflow-y: auto! important // Hapus! important jika Anda ingin bilah gulir menghilang
}
`` ''
chrisshaddad
pada 10 Jul 2018
Semoga ini membantu orang lain:
Setelah mencoba beberapa timpaan css yang tampaknya berhasil tetapi terasa salah, seperti overflow-y: scroll di seluruh aplikasi kami. Kami telah memaksa aplikasi scrollbar sumbu y untuk mencegah pergeseran karena halaman kami memiliki panjang yang bervariasi - beberapa memerlukan pengguliran sumbu y, beberapa tidak.
Alih-alih menempatkan sejumlah tambahan body atau gaya sebaris, kami dapat memperbaiki pergeseran dengan mengisolasi overflow-y: scroll ke konten di bawah AppBar / Header kami yang telah diperbaiki. Sekarang kita memiliki scrollbar yang selalu hijau untuk konten halaman, bukan seluruh jendela, bersama dengan tidak ada pergeseran dari modals / menu karena scrollbar dilampirkan ke konten halaman dan bukan body .
Untuk referensi DOM kami terlihat seperti:
<div>
<Header />
<div className="pageContent">
<div className="page">
<Route exact path="/pathToPage"> component={PageContent} />
</div>
</div>
</div>
dan CSS (tinggi header kita adalah 45px):
.pageContent {
position: absolute;
top: 45px;
left: 0;
right: 0;
bottom: 0;
}
.pageContent .page {
height: 100%;
overflow-y: scroll;
}
cvocke
pada 16 Jul 2018
Halo,
Saat ini saya memiliki masalah yang sama dan saya harus mengakui bahwa saya tidak dapat menemukan kebahagiaan saya dalam salah satu solusi yang disebutkan.
Dari apa yang saya pahami, Modal tidak memungkinkan untuk menggunakan scrollbar, yang bermasalah karena saya menggunakan Modal untuk melakukan pencarian lanjutan dan Modal tidak selalu diperlukan untuk memiliki konten pendek.
Berpikir tentang masalah dan solusi yang Anda sebutkan, saya bertanya-tanya mengapa Material-UI tidak mungkin menerapkan properti yang dapat digulir untuk semua yang terkait dengan Modal , Dialog , Menu dan elemen popup lainnya. Secara default, properti boolean ini bernilai false, tetapi bisa juga true untuk memungkinkan scrollbar ditampilkan di komponen.
Jika ini tidak memungkinkan, mungkin menerapkan komponen ScrollBar langsung, bahkan jika saya lebih suka ide sebelumnya.
Saya rasa ini lebih mudah diucapkan daripada dilakukan. Oleh karena itu, saya ingin berterima kasih atas pekerjaan luar biasa yang Anda lakukan.
rememberYou
pada 9 Sep 2018
FWIW Saya baru saja menetapkan body { overflow-y: scroll } global dan semuanya tampaknya bekerja dengan baik.
avdd
pada 9 Sep 2018
@avdd Ini tidak membantu karena akan memungkinkan Anda untuk menggulir di badan dan bukan di modal.
rememberYou
pada 9 Sep 2018
@rememberYou Modal adalah primitif level rendah, Anda mungkin ingin menggunakan dialog sebagai gantinya: https://material-ui.com/demos/dialogs/#scrolling -long-content.
oliviertassinari
pada 9 Sep 2018
@rememberYou ModalManager menetapkan overflow:hidden langsung pada elemen kontainer (body) saat modal terlihat dan menyetel ulang saat modal selesai, jadi, ya, ini berfungsi untuk saya.
avdd
pada 9 Sep 2018
@oliviertassinari terima kasih atas solusinya.
@avdd maaf, saya tidak mencoba dengan ModalManager .
rememberYou
pada 9 Sep 2018
@lorensr Apakah ini masih menjadi masalah?
nathanmarks
pada 10 Sep 2018
@oliviertassinari Satu hal lagi, saya mencoba dengan Dialog , ini bekerja dengan baik, tetapi karena saya ingin desain yang lebih khusus, saya suka menggunakan Modals .
Masalahnya adalah saya memiliki Modal (Login) yang memiliki link untuk membuka Modal (SignUp) kedua yang memiliki link untuk kembali ke Login.
Dalam kasus ini, apakah saya harus menggunakan ModalManager untuk menambahkan dan menghapus Modal ? Maaf untuk keluar dari subjek masalah, saya tidak menemukan dokumentasi apa pun tentang subjek tersebut.
rememberYou
pada 10 Sep 2018
@nathanmarks ya, sepertinya halaman dokumen komponen modal masih tidak menyebutkan .mui-fixed
lorensr
pada 10 Sep 2018
Menggunakan 3.5.1 - Dialog bergeser ke kiri sebelum ditutup.
Dapat direproduksi di sini https://material-ui.com/demos/dialogs/ - buka dan tutup demo Dialog Sederhana.
Setelah pengujian, ini dimulai di v3.3.
stephen099
pada 14 Nov 2018
@ stephen099 Terima kasih telah melaporkan! Saya mengonfirmasi, tetapi ini masalah yang berbeda.
oliviertassinari
pada 22 Nov 2018
Saya perhatikan bahwa pada header (dengan mui terbaru), mui-fixed ditambahkan ke nama kelas, tetapi tidak ada gaya yang ditetapkan padanya (dengan memeriksa header, tidak ada mui-fixed aturan dimuat.
Saya bertanya-tanya, mengapa 'add padding' ini terjadi di tempat pertama, mengapa itu diperlukan? Bagi saya itu rusak oleh komponen Menu .
Bagaimana cara mencegah hal ini terjadi tanpa harus mengganti gaya css dengan !important ...? Terima kasih
vajnorcan
pada 27 Feb 2019
@vajnorcan Nama mui-fixed memberi sinyal komponen modal (digunakan oleh menu) bahwa posisi elemen akan berubah saat mengunci scroll pada elemen body. Kami mengimbangi penghapusan lebar scrollbar dengan gaya padding-right sementara. Bisakah Anda memberikan contoh reproduksi minimal pada CodeSandbox? Terima kasih.
oliviertassinari
pada 27 Feb 2019
Maaf di mana Anda meletakkan .mui-fix? Saya memiliki masalah ini dengan memilih membuka menu.
capsule5
pada 13 Mar 2019
@ capsule5 Anda perlu menambahkannya ke elemen yang "melompat" karena bilah gulir dinonaktifkan pada menu terbuka (biasanya ini harus menjadi elemen yang dipasang di kanan) dan paddingnya akan ditangani untuk Anda .
Perhatikan juga bahwa, seperti yang disebutkan di atas, Anda mungkin perlu menambahkan ini ke gaya global Anda:
.mui-fixed {
/*
* make sure that added right padding
* actually pushes contents to the left
*/
box-sizing: content-box;
}
cvara
pada 22 Mar 2019
Tidak ada reproduksi di utas ini. Saya tutup.
@cvara Kami melacaknya di # 9275.
oliviertassinari
pada 12 Jul 2019
Saya tidak mengerti, apakah ini terpecahkan? Saya meningkatkan dari v0.9 ke v4 dan sekarang ketika saya membuka modals konten saya melompat ke kiri (mendapatkan padding-right: 17px )? Apa solusi yang direkomendasikan untuk itu?
Edit nanti:
Karena dalam kasus saya, saya memiliki overflow-y: scroll !important; saya juga harus menambahkan padding-right: 0px !important; untuk memperbaiki masalah melompat ini.
Cristy94
pada 9 Nov 2019
Cara saya memperbaikinya adalah dengan menambahkan disableScrollLock={ true } di komponen saya :)
Toshiuk
pada 27 Nov 2019
@Toshiuk komponen yang mana?
wongjiahau
pada 1 Des 2019
@wongjiahau komponen Modal v4 +
sartios
pada 4 Des 2019
Anda juga dapat menambahkan disableScrollLock ke Menu
jeronimomora
pada 14 Des 2019
Ini mereproduksi untuk saya juga. Menambahkan disableScrollLock tidak masuk akal karena saya menggunakan komponen pihak ketiga yang menambahkan item Menu. Ini harus diperbaiki. Mungkin mendeteksi bahwa scrollbar benar-benar ditampilkan atau tidak.
archfz
pada 14 Des 2019
@archfz Apakah Anda memiliki reproduksi?
oliviertassinari
pada 15 Des 2019
Saya menyaksikan ini dalam penggunaan komponen Select juga. Setiap kali dropdown Select dibuka, overflow: hidden, padding-right: 15px ditambahkan ke tag body utama aplikasi saya. Apakah ada solusi selain mengganti gaya? Saya merasa ini bukan perilaku yang diharapkan
WholemealDrop
pada 17 Des 2019
@WholemealDrop Ikuti # 17353.
oliviertassinari
pada 17 Des 2019
@oliviertassinari ahah sepertinya kemampuan pencarian saya tidak terlalu bagus. Terima kasih!
WholemealDrop
pada 17 Des 2019
@oliviertassinari Saya telah berhasil mengurangi masalah ke intinya. Masalahnya tampaknya entah bagaimana ada perhitungan yang salah saat tampilan: flex + minHeight: 100vh + body tidak ada padding dan margin yang digabungkan. Sepertinya kode tersebut mengharapkan adanya scrollbar di sana tetapi sebenarnya tidak ada. Kode ini harus mereproduksi masalah.
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 Bisakah Anda membuat kotak kode? (Anda bisa mulai dengan salah satu contoh dokumen.)
mbrookes
pada 18 Des 2019
@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark
archfz
pada 18 Des 2019
@archfz Maaf, melewatkan ini.
Apa yang saya cari di sini? Saya tidak mengalami perubahan tata letak apa pun.
mbrookes
pada 8 Jan 2020
@archfz Maaf, melewatkan ini.
Apa yang saya cari di sini? Saya tidak mengalami perubahan tata letak apa pun.
Saat Anda mengklik karakter di kanan atas, karakter akan bergerak ke kiri saat item menu terbuka dan kemudian kembali ke kanan saat item menu ditutup.
WholemealDrop
pada 8 Jan 2020
Bisakah Anda membuka terbitan baru? Sepertinya sesuatu yang baru.
oliviertassinari
pada 8 Jan 2020
@archfz Ok, ini konflik dengan tooltip. Mari kita abaikan.
oliviertassinari
pada 11 Jan 2020
@oliviertassinari Yah kita tidak boleh mengabaikannya karena ini masalah nyata. React-admin menggunakan UI material dan ini sebenarnya merupakan masalah di luar kotak. Saya telah membuat masalah di sini https://github.com/mui-org/material-ui/issues/19203
archfz
pada 12 Jan 2020
Solusi yang diulang oleh
Menu, StyledMenu:
disableScrollLock={ true }Pilih:
MenuProps={{ disableScrollLock: true }}
Kami benar-benar perlu membuat solusi lebih mudah ditemukan! :-)
samheyman
pada 1 Mar 2020
Saya memiliki masalah dengan warna latar belakang toolbar ketika saya membuka menu, dan scrollbar menjadi tidak terlihat
ini contohnya:
https://codesandbox.io/s/material-demo-nj80l
tahu seseorang bagaimana cara memperbaikinya?
Risbot
pada 9 Mar 2020
tambahkan saja css berikut
body {padding-right: 0px! important; }
sandunr
pada 11 Apr 2020
halo, di aplikasi saya, saya menggunakan solusi ini.
Saya menambahkan disableScrollLock={true} disablePortal={true} id="custom" pada komponen saya <Menu> dan di css saya
#custom {
.MuiPopover-paper,
.MuiPopover-paper {
max-height: inherit !important;
}
}
ini bekerja dengan sempurna dalam kasus saya. Saya harap trik ini bisa membantu.
Vincent-Alibert
pada 22 Apr 2020
Saya mengalami masalah yang sama saat bekerja dengan Dialog. Berikut ini adalah satu-satunya solusi yang saya coba yang menghapus perpindahan konten dan masih mengunci gulir halaman yang mendasarinya / menghapus bilah gulirnya.
Larutan:
Buka div penampung terluar atau div terluar (penampung apa pun yang merangkum seluruh aplikasi Anda) di aplikasi Anda dan setel lebarnya menjadi ini:
width: calc(100vw - 1px);
1px dapat diganti dengan 34px atau nilai rendah lainnya. Ini akan membuatnya sehingga membuka Dialog akan menyembunyikan bilah gulir dari halaman yang mendasarinya, jika ada, dan tidak akan membuat perubahan apa pun pada posisi konten. Pengguliran masih terkunci untuk halaman yang mendasarinya dan pengguliran masih dimungkinkan untuk dialog Anda.
fastlogin
pada 18 Mei 2020
disableScrollLock = {true}
Anda hanya brilian, Terima kasih
cy-sachin-m
pada 25 Agu 2020
Masalah terkait
ryanflorence
·
3Komentar
ghost
·
3Komentar
anthony-dandrea
·
3Komentar
newoga
·
3Komentar
pola88
·
3Komentar
Komentar yang paling membantu
Cara saya memperbaikinya adalah dengan menambahkan
disableScrollLock={ true }di komponen saya :)