Material-ui: [Modal] Проблема с полосой прокрутки и заполнением

Созданный на 23 янв. 2018 · 47Комментарии · Источник: mui-org/material-ui

Когда открывается Menu , полоса прокрутки страницы исчезает. Это может повлиять на макет страницы. В моем случае все перескакивает вправо, что является визуальной ошибкой.

Решение

Либо A) исправьте это в библиотеке, либо B) обратите внимание на это поведение в документации и укажите способы его решения:

https://material-ui-next.com/demos/menus/

Контейнер для прыжков - absolute, left: 0, right: 0 , с разделами text-align: center или display: flex; flex-direction: column; align-items: center;

Ваше окружение

| Технология | Версия |
| -------------- | --------- |
| Материал-UI | 1.0.0-beta.29 |

Связанные вопросы

Они все закрыты, и я не нашел в них решения:

8475 # 7431 # 6656 # 8710

bug 🐛 Modal

Источник

lorensr

👍31

Самый полезный комментарий

Я исправил это, просто добавив disableScrollLock={ true } в свой компонент :)

Toshiuk 27 нояб. 2019

👍20 🎉10 🚀8 😄3 👎1

Все 47 Комментарий

В моем случае все перескакивает вправо, что является визуальной ошибкой.

@lorensr У вас есть пример репродукции? Это известное ограничение на отключение полосы прокрутки. Мы обрабатываем элементы с абсолютным позиционированием, которые имеют имя класса .mui-fixed .
Нам нужно это задокументировать!

oliviertassinari 23 янв. 2018

👍3

К вашему сведению, еще я обнаружил, что исправление .mui-fixed работает, только если ваш фиксированный элемент также имеет

box-sizing: content-box;

pelotom 23 янв. 2018

Спасибо, добавление класса сработало. Мне не нужны были content-box . Это элемент border-box .

Также следует отметить, что при удалении полосы прокрутки заголовок блока внутри моего элемента right: 0 не растягивался до правого края браузера.

Исправлено изменением right: -20px , поэтому теперь css:

main {
  position: absolute;
  box-sizing: border-box;
  left: 0;
  right: -20px;
  overflow-x: hidden;
}

Обратной стороной является то, что при наличии полосы прокрутки центрированные дочерние элементы теперь находятся на 10 пикселей правее центра, и мне приходится скрывать переполнение.

lorensr 25 янв. 2018

В некоторых случаях невозможно применить класс css, фиксированный mui, к некоторым фиксированным элементам. Например, четкий виджет чата внизу моей страницы. Наверное, бывает и с виджетом домофона.

Кто-нибудь еще сталкивался с такой же проблемой и нашел решение?
localhost_4000

abhishiv 16 мар. 2018

У меня была аналогичная проблема, но контейнер не был абсолютным. Что исправило это для меня, так это добавление !important к моему заполнению следующим образом:

padding: 0 !important;

michielglibert 5 июн. 2018

🎉9

Я не уверен на 100%, что это правильный способ сделать это, но я добавил следующие свойства css в тег <body>

`` css
body {
позиция: абсолютная;
слева: -17px;
вправо: -17 пикселей;
padding-top: 0;
отступ справа: 17 пикселей;
отступ слева: 17 пикселей;
padding-bottom: 0px;
переполнение-x: скрыто;
overflow-y: auto! important // Удалите! important, если хотите, чтобы полоса прокрутки исчезла
}
`` ''

chrisshaddad 10 июл. 2018

👎1 👍1

Надеюсь, это поможет кому-то другому:

Попробовав несколько различных переопределений css, которые, казалось, работали, но чувствовали себя неправильно, например, @chrisshaddad , я обнаружил, что мы начинаем переключаться из-за ранее принудительного использования overflow-y: scroll во всем нашем приложении. Мы принудительно использовали полосу прокрутки по оси Y для всего приложения, чтобы предотвратить смещение из-за того, что наши страницы имеют разную длину - некоторые требуют прокрутки по оси Y, некоторые нет.

Вместо того, чтобы разместить кучу дополнительных body или встроенных стилей, мы смогли исправить сдвиг, изолировав overflow-y: scroll от содержимого под нашим фиксированным AppBar / Header. Теперь у нас есть вечнозеленая полоса прокрутки для содержимого страницы, а не для всего окна, без перехода из модальных окон / меню, поскольку полоса прокрутки прикреплена к содержимому страницы, а не к body .

Для справки наша DOM выглядит так:

<div>
  <Header />
  <div className="pageContent">
    <div className="page">
      <Route exact path="/pathToPage"> component={PageContent} />
    </div>
  </div>
</div>

и CSS (высота нашего заголовка 45 пикселей):

.pageContent {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  bottom: 0;
}
.pageContent .page {
  height: 100%;
  overflow-y: scroll;
}

cvocke 16 июл. 2018

Здравствуйте,

У меня сейчас такая же проблема, и я должен признать, что не могу найти счастья ни в одном из упомянутых решений.

Насколько я понял, Modal не позволяет использовать полосу прокрутки, что проблематично, потому что я использую Modal для выполнения расширенного поиска, а Modal не всегда требуется иметь краткое содержание.

Думая о проблеме и упомянутых вами решениях, я задавался вопросом, почему для Material-UI невозможно реализовать прокручиваемое свойство для всего, что связано с Modal , Dialog , Menu и другие всплывающие элементы. По умолчанию это логическое свойство имеет значение false, но может иметь значение true, чтобы разрешить отображение полосы прокрутки в компоненте.

Если это невозможно, возможно, сразу реализовать компонент ScrollBar , даже если я предпочитаю эту идею раньше.

Я подозреваю, что это легче сказать, чем сделать. Поэтому я хотел бы поблагодарить вас за исключительную работу, которую вы делаете.

rememberYou 9 сент. 2018

👍1

FWIW Я просто установил глобальный body { overflow-y: scroll } и, похоже, все работает нормально.

avdd 9 сент. 2018

👎1

@avdd Это не помогает, так как позволяет прокручивать

rememberYou 9 сент. 2018

👍1

@rememberYou Модальное окно - это примитив низкого уровня, вместо него вы можете использовать диалог: https://material-ui.com/demos/dialogs/#scrolling -long-content.

oliviertassinari 9 сент. 2018

👎1

@rememberYou ModalManager устанавливает overflow:hidden непосредственно на элемент контейнера (тело), когда модальное окно видно, и сбрасывает его, когда модальное окно завершено, так что да, это работает для меня.

https://github.com/mui-org/material-ui/blob/7d4aeaf4c9cdf00a9c7eb41bd9bb7cac61840739/packages/material-ui/src/Modal/ModalManager.js#L24

avdd 9 сент. 2018

@oliviertassinari спасибо за решение.
@avdd мои извинения, я не пробовал с ModalManager .

rememberYou 9 сент. 2018

@lorensr Это все еще проблема?

nathanmarks 10 сент. 2018

@oliviertassinari И последнее, что я пробовал с Dialog , он работает хорошо, но поскольку мне нужен более конкретный дизайн, я предпочитаю использовать Modals .

Проблема в том, что у меня есть Modal (Login), у которого есть ссылка для открытия второго Modal (SignUp), у которого есть ссылка для возврата к Login.

В этом случае мне нужно использовать ModalManager чтобы легко добавлять и удалять Modal ? Извините, что не затрагиваю тему проблемы, я не нашел никакой документации по этому вопросу.

rememberYou 10 сент. 2018

👎1

@nathanmarks да, похоже, на страницах документации модальных компонентов все еще не упоминается .mui-fixed

lorensr 10 сент. 2018

При использовании 3.5.1 - перед закрытием диалог смещается влево.

Воспроизводится здесь https://material-ui.com/demos/dialogs/ - откройте и закройте демонстрацию Simple Dialog.

После тестирования это началось в v3.3.

stephen099 14 нояб. 2018

@ stephen099 Спасибо за сообщение! Подтверждаю, но это другой вопрос.

oliviertassinari 22 нояб. 2018

Я заметил, что в заголовке (с последним mui) к именам классов добавляется mui-fixed , но ему не назначен стиль (при проверке заголовка нет mui-fixed Правило

Мне интересно, почему вообще происходит это «добавление отступов», зачем оно нужно? Для меня это нарушено компонентом Menu .

Как мне предотвратить это, не переопределяя стиль CSS с помощью !important ...? благодаря

vajnorcan 27 февр. 2019

👍1

@vajnorcan Имя mui-fixed сигнализирует модальному компоненту (используемому меню), что позиция элемента изменится при блокировке прокрутки на элементе body. Мы компенсируем удаление ширины полосы прокрутки временным стилем padding-right. Не могли бы вы привести пример минимального воспроизведения на CodeSandbox? Спасибо.

oliviertassinari 27 февр. 2019

Извините, куда вы положили .mui-fixed? У меня проблема с выбором, открывающим меню.

capsule5 13 мар. 2019

@ caple5 Вам нужно добавить его к элементу, который "прыгает" из-за того, что полоса прокрутки отключена при открытии меню (обычно это должен быть элемент, закрепленный справа), и его заполнение будет выполнено за вас .

Также обратите внимание, что, как упоминалось выше, вам может потребоваться добавить это в свои глобальные стили:

.mui-fixed {
  /*
   * make sure that added right padding
   * actually pushes contents to the left
   */
  box-sizing: content-box;
}

cvara 22 мар. 2019

👍3

В этой ветке репродукции нет. Я закрываю.

@cvara Мы отслеживаем это в # 9275.

oliviertassinari 12 июл. 2019

Я не понимаю, это решено? Я обновился с v0.9 до v4, и теперь, когда я открываю модальные окна, мой контент перескакивает влево (получая padding-right: 17px )? Какое решение для этого рекомендуется?

Позже отредактируйте:

Поскольку в моем случае у меня было overflow-y: scroll !important; мне также пришлось добавить padding-right: 0px !important; чтобы исправить эту проблему с прыжками.

Cristy94 9 нояб. 2019

👍5 ❤1

Я исправил это, просто добавив disableScrollLock={ true } в свой компонент :)

Toshiuk 27 нояб. 2019

👍20 🎉10 🚀8 😄3 👎1

@ Тошюк какой компонент?

wongjiahau 1 дек. 2019

👍1

@wongjiahau Модальный компонент v4 +

sartios 4 дек. 2019

Вы также можете добавить disableScrollLock в меню

jeronimomora 14 дек. 2019

Это тоже воспроизводится для меня. Добавление disableScrollLock маловероятно, поскольку я использую сторонние компоненты, которые добавляют элементы меню. Это должно быть исправлено. Возможно, вы обнаружите, что полоса прокрутки действительно отображается или нет.

archfz 14 дек. 2019

@archfz У вас есть репродукция?

oliviertassinari 15 дек. 2019

Я наблюдаю это при использовании компонентов Select . Каждый раз, когда открывается раскрывающийся список Select , overflow: hidden, padding-right: 15px добавляется к основному тегу body моего приложения. Есть ли решение, кроме переопределения стилей? Я чувствую, что это не ожидаемое поведение

WholemealDrop 17 дек. 2019

@WholemealDrop Следуйте # 17353.

oliviertassinari 17 дек. 2019

👍1

@oliviertassinari ахах, похоже, мои поисковые навыки не так

WholemealDrop 17 дек. 2019

@oliviertassinari Мне удалось свести проблему к сути. Проблема, по-видимому, заключается в том, что при отображении: flex + minHeight: 100vh + body без отступов и полей возникают некорректные вычисления. Кажется, что код ожидает, что там будет полоса прокрутки, но на самом деле ее нет. Этот код должен воспроизвести проблему.

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 18 дек. 2019

@archfz Не могли бы вы создать codeandbox? (Вы можете начать с одного из примеров документации.)

mbrookes 18 дек. 2019

@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark

archfz 18 дек. 2019

@archfz Извините, я пропустил это.

Что я здесь ищу? Никаких изменений макета не наблюдается.

mbrookes 8 янв. 2020

@archfz Извините, я пропустил это.
Что я здесь ищу? Никаких изменений макета не наблюдается.

Когда вы нажимаете на символ в правом верхнем углу, он перемещается влево при открытии пункта меню, а затем возвращается вправо при закрытии пункта меню.

WholemealDrop 8 янв. 2020

Не могли бы вы открыть новый выпуск? Вроде что-то новенькое.

oliviertassinari 8 янв. 2020

@archfz Хорошо, это конфликт с подсказкой. Давайте проигнорируем это.

oliviertassinari 11 янв. 2020

@oliviertassinari Ну, мы не должны игнорировать это, потому что это реальная проблема. React-admin использует материальный пользовательский интерфейс, и на самом деле это проблема из коробки. Я создал проблему здесь https://github.com/mui-org/material-ui/issues/19203

archfz 12 янв. 2020

Решение, повторенное @Toshiuk, состоит в том, чтобы просто добавить следующее:

Меню, Стилизованное Меню:
disableScrollLock={ true }
Выбрать:
MenuProps={{ disableScrollLock: true }}

Нам действительно нужно облегчить поиск решений! :-)

samheyman 1 мар. 2020

👍10

У меня проблема с цветом фона панели инструментов, когда я открываю меню, и полоса прокрутки становится невидимой

вот пример:
https://codesandbox.io/s/material-demo-nj80l

кто-нибудь знает, как это исправить?

Risbot 9 мар. 2020

просто добавьте следующий css
тело {padding-right: 0px! важно; }

sandunr 11 апр. 2020

привет, в своем приложении я использую это решение.
Я добавляю disableScrollLock={true} disablePortal={true} id="custom" в свой компонент <Menu> и в свой css
#custom { .MuiPopover-paper, .MuiPopover-paper { max-height: inherit !important; } }
это отлично работает в моем случае. Надеюсь, эти уловки помогут.

Vincent-Alibert 22 апр. 2020

У меня возникли те же проблемы при работе с диалогами. Следующее - единственное решение, которое я пробовал, которое устраняет смещение содержимого и по-прежнему блокирует прокрутку базовой страницы / удаляет ее полосу прокрутки.

Решение:
Перейдите к самому внешнему контейнеру div или любому самому внешнему div (любому контейнеру, который инкапсулирует все ваше приложение) в вашем приложении и установите его ширину на это:

width: calc(100vw - 1px);

1px можно заменить на 34px или любое другое низкое значение. Это сделает так, что открытие диалогового окна будет скрывать полосу прокрутки базовой страницы, если она есть, и не будет создавать никакого сдвига в позиции содержимого. Прокрутка по-прежнему заблокирована для базовой страницы, и прокрутка по-прежнему возможна для вашего диалога.