Material-ui: [모달] 스크롤바 및 패딩 문제

에 만든 2018년 01월 23일 · 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;

당신의 환경

| 기술 | 버전 |
| -------------- | --------- |
| Material-UI | 1.0.0- 베타 .29 |

8475 # 7431 # 6656 # 8710

bug 🐛 Modal

출처

lorensr

👍31

가장 유용한 댓글

내가 고친 방법은 내 구성 요소에 disableScrollLock={ true } 를 추가하는 것입니다. :)

Toshiuk 에 2019년 11월 27일

👍20 🎉10 🚀8 😄3 👎1

모든 47 댓글

제 경우에는 모든 것이 오른쪽으로 이동하는데 이는 시각적 인 버그입니다.

@lorensr 복제 예가 있습니까? 스크롤바 비활성화에 대한 잘 알려진 제한 사항입니다. .mui-fixed 클래스 이름을 가진 절대 위치 요소를 처리합니다.
문서화해야합니다!

oliviertassinari 에 2018년 01월 23일

👍3

참고로, 제가 찾은 또 다른 사실은 .mui-fixed 수정은 고정 요소에도 다음이있는 경우에만 작동한다는 것입니다.

box-sizing: content-box;

pelotom 에 2018년 01월 23일

감사합니다. 수업을 추가했습니다. 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 에 2018년 01월 25일

어떤 경우에는 일부 고정 요소에 mui-fixed css 클래스를 적용 할 수 없습니다. 예를 들어 내 페이지 하단의 선명한 채팅 위젯. 아마도 인터콤 위젯에서도 발생합니다.

다른 사람이 같은 문제를 가지고 있고 해결책을 찾았습니까?
localhost_4000

abhishiv 에 2018년 03월 16일

비슷한 문제가 있었지만 컨테이너는 절대적이지 않았습니다. 나를 위해 고친 것은 다음과 같이 내 패딩에 !important 을 추가하는 것입니다.

padding: 0 !important;

michielglibert 에 2018년 06월 05일

🎉9

이것이 올바른 방법인지 100 % 확실하지 않지만 <body> 태그에 다음 CSS 속성을 추가했습니다.

```css
신체 {
위치 : 절대;
왼쪽 : -17px;
오른쪽 : -17px;
padding-top : 0;
padding-right : 17px;
padding-left : 17px;
padding-bottom : 0px;
overflow-x : 숨김;
overflow-y : auto! important // 스크롤 막대를 사라지게하려면! important 제거
}
````

chrisshaddad 에 2018년 07월 10일

👎1 👍1

다른 사람에게 도움이되기를 바랍니다.

작동하는 것처럼 보이지만 @chrisshaddad 와 같이 잘못 느껴지는 다양한 CSS 재정의를 시도한 후 이전에 전체 앱에 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 (헤더의 높이는 45px) :

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

cvocke 에 2018년 07월 16일

안녕하세요,

나는 현재 이와 같은 문제가 있으며 언급 된 해결책 중 어느 것도 내 행복을 찾을 수 없음을 인정해야합니다.

내가 이해 한 바에 따르면 Modal 은 스크롤바를 사용할 수 없습니다. Modal 를 사용하여 고급 검색을 수행하고 Modal 가 항상 필요한 것은 아니기 때문에 문제가됩니다. 내용이 짧습니다.

언급 한 문제와 해결책에 대해 생각하면서 Material-UI가 Modal , Dialog , Menu 관련 모든 항목에 대해 스크롤 가능한 속성을 구현할 수없는 이유가 궁금합니다. Menu 및 기타 팝업 요소. 기본적으로이 부울 속성은 false이지만 구성 요소에 스크롤 막대를 표시하려면 true 일 수 있습니다.

이것이 가능하지 않다면 이전에 아이디어를 선호하더라도 ScrollBar 구성 요소를 완전히 구현할 수 있습니다.

나는 이것이 말한 것보다 더 쉽다고 생각한다. 그러므로 나는 당신이하고있는 뛰어난 일에 감사하고 싶습니다.

rememberYou 에 2018년 09월 09일

👍1

FWIW 방금 글로벌 body { overflow-y: scroll } 설정했는데 모든 것이 잘 작동하는 것 같습니다.

avdd 에 2018년 09월 09일

👎1

@avdd 모달이 아닌 본문에서 스크롤 할 수 있으므로 도움이되지 않습니다.

rememberYou 에 2018년 09월 09일

👍1

@rememberYou 모달은 낮은 수준의 기본 요소이므로 대신 대화 상자를 사용할 수 있습니다. https://material-ui.com/demos/dialogs/#scrolling -long-content.

oliviertassinari 에 2018년 09월 09일

👎1

@rememberYou ModalManager는 모달이 표시 될 때 컨테이너 요소 (본문)에 직접 overflow:hidden 설정하고 모달이 완료되면 재설정하므로 저에게 적합합니다.

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

avdd 에 2018년 09월 09일

@oliviertassinari 솔루션에 감사드립니다.
@avdd 죄송합니다. ModalManager 시도하지 않았습니다.

rememberYou 에 2018년 09월 09일

@lorensr 이것이 여전히 문제입니까?

nathanmarks 에 2018년 09월 10일

@oliviertassinari 마지막으로 Dialog 시도했지만 잘 작동하지만 더 특별한 디자인을 원하기 때문에 Modals 를 사용하고 싶습니다.

문제는 로그인으로 돌아가는 링크가있는 두 번째 Modal (SignUp)을 여는 링크가있는 Modal (로그인)이 있다는 것입니다.

이 경우, 내가 사용해야합니까 ModalManager 쉽게 추가하고 제거 Modal ? 문제의 주제에서 벗어나서 죄송합니다. 주제에 대한 문서를 찾지 못했습니다.

rememberYou 에 2018년 09월 10일

👎1

@nathanmarks 예, 모달 구성 요소 문서 페이지에 여전히 .mui-fixed 언급되지 않은 것 같습니다.

lorensr 에 2018년 09월 10일

3.5.1 사용-닫기 전에 대화 상자가 왼쪽으로 이동합니다.

여기에서 재현 가능 https://material-ui.com/demos/dialogs/-Simple Dialog 데모를 열고 닫습니다.

테스트 후 v3.3에서 시작되었습니다.

stephen099 에 2018년 11월 14일

@ stephen099 보고 해주셔서 감사합니다! 확인했지만 다른 문제입니다.

oliviertassinari 에 2018년 11월 22일

헤더 (최신 mui 사용)에서 mui-fixed 가 클래스 이름에 추가되었지만 할당 된 스타일이 없습니다 (헤더를 검사하여 mui-fixed 가 없음).

왜이 '패딩 추가'가 처음에 발생하는지 궁금합니다. 왜 필요한가요? 나를 위해 그것은 Menu 구성 요소에 의해 깨졌습니다.

!important ...로 CSS 스타일을 재정의하지 않고도이 문제가 발생하지 않도록하려면 어떻게해야합니까? 감사

vajnorcan 에 2019년 02월 27일

👍1

@vajnorcan mui-fixed 클래스 이름은 body 요소에서 스크롤을 잠글 때 요소 위치가 변경 될 것임을 메뉴에서 사용하는 모달 구성 요소에 알립니다. 임시 패딩 오른쪽 스타일로 스크롤바 너비 제거를 보완합니다. CodeSandbox에 최소한의 복제 예제를 제공 할 수 있습니까? 감사합니다.

oliviertassinari 에 2019년 02월 27일

.mui-fixed를 어디에 두었습니까? 메뉴를 여는 선택 에이 문제가 있습니다.

capsule5 에 2019년 03월 13일

@ capsule5 메뉴가 열릴 때 스크롤바가 비활성화되어 "점프"하는 요소에 추가해야하며 (일반적으로 이것은 오른쪽에 고정 된 요소 여야 함) 패딩이 처리됩니다 .

또한 위에서 언급했듯이이를 전역 스타일에 추가해야 할 수도 있습니다.

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

cvara 에 2019년 03월 22일

👍3

이 스레드에는 재생산이 없습니다. 닫습니다.

@cvara 우리는 # 9275에서 그것을 추적합니다.

oliviertassinari 에 2019년 07월 12일

이해가 안가요, 해결 되었나요? v0.9에서 v4로 업그레이드했는데 이제 모달을 열면 콘텐츠가 왼쪽으로 이동합니까 ( padding-right: 17px )? 이에 대한 권장 솔루션은 무엇입니까?

나중에 편집 :

제 경우에는 overflow-y: scroll !important; 가 있었기 때문에이 점프 문제를 해결하기 위해 padding-right: 0px !important; 도 추가해야했습니다.

Cristy94 에 2019년 11월 09일

👍5 ❤1

내가 고친 방법은 내 구성 요소에 disableScrollLock={ true } 를 추가하는 것입니다. :)

Toshiuk 에 2019년 11월 27일

👍20 🎉10 🚀8 😄3 👎1

@Toshiuk 어떤 구성 요소?

wongjiahau 에 2019년 12월 01일

👍1

@wongjiahau 모달 구성 요소 v4 +

sartios 에 2019년 12월 04일

메뉴에 disableScrollLock을 추가 할 수도 있습니다.

jeronimomora 에 2019년 12월 14일

이것은 나에게도 재현되고 있습니다. 메뉴 항목을 추가하는 타사 구성 요소를 사용하고 있기 때문에 disableScrollLock을 추가하는 것은 타당하지 않습니다. 이것은 수정되어야합니다. 스크롤바가 실제로 표시되는지 여부를 감지 할 수 있습니다.

archfz 에 2019년 12월 14일

@archfz 복제품이 있습니까?

oliviertassinari 에 2019년 12월 15일

나는 Select 구성 요소를 사용하여 이것을 목격하고 있습니다. Select 드롭 다운이 열릴 때마다 overflow: hidden, padding-right: 15px 가 내 앱의 기본 body 태그에 추가됩니다. 스타일을 재정의하는 것 외에 해결책이 있습니까? 이것은 예상 된 행동이 아닌 것 같습니다.

WholemealDrop 에 2019년 12월 17일

@WholemealDrop 팔로우 # 17353.

oliviertassinari 에 2019년 12월 17일

👍1

@oliviertassinari ahah 분명히 내 검색 기술이 그다지 좋지 않습니다. 감사합니다!

WholemealDrop 에 2019년 12월 17일

@oliviertassinari 저는 문제를 핵심으로 줄일 수있었습니다. 문제는 display : flex + minHeight : 100vh + body no padding and margin이 결합 될 때 어떻게 든 잘못된 계산이 있다는 것입니다. 코드가 거기에 스크롤바가있을 것으로 예상하는 것처럼 보이지만 실제로는 없습니다. 이 코드는 문제를 재현해야합니다.

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 에 2019년 12월 18일

@archfz codesandbox 를 만드시겠습니까? (문서 예제 중 하나로 시작할 수 있습니다.)

mbrookes 에 2019년 12월 18일

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

archfz 에 2019년 12월 18일

@archfz 죄송합니다, 이것을 놓쳤습니다.

여기서 무엇을 찾고 있습니까? 레이아웃 변경이 발생하지 않습니다.

mbrookes 에 2020년 01월 08일

@archfz 죄송합니다, 이것을 놓쳤습니다.
여기서 무엇을 찾고 있습니까? 레이아웃 변경이 발생하지 않습니다.

오른쪽 상단의 문자를 클릭하면 메뉴 항목이 열리면 왼쪽으로 이동하고 메뉴 항목이 닫히면 오른쪽으로 다시 이동합니다.

WholemealDrop 에 2020년 01월 08일

새로운 문제를 열 수 있습니까? 뭔가 새로운 것 같습니다.

oliviertassinari 에 2020년 01월 08일

@archfz 좋아, 도구 설명과 충돌합니다. 무시합시다.

oliviertassinari 에 2020년 01월 11일

@oliviertassinari 글쎄, 우리는 그것이 진짜 문제이기 때문에 그것을 무시해서는 안됩니다. React-admin은 머티리얼 UI를 사용하며 실제로는 즉시 사용 가능한 문제입니다. 여기에 문제가 있습니다 https://github.com/mui-org/material-ui/issues/19203

archfz 에 2020년 01월 12일

@Toshiuk 가 다시 반복하는 솔루션은 다음을 추가하는 것입니다.

메뉴, 스타일 메뉴 :
disableScrollLock={ true }
고르다:
MenuProps={{ disableScrollLock: true }}

솔루션을 더 쉽게 찾을 수 있도록 만들어야합니다! :-)

samheyman 에 2020년 03월 01일

👍10

메뉴를 열 때 툴바의 배경색에 문제가 있고 스크롤바가 보이지 않습니다.

다음은 예입니다.
https://codesandbox.io/s/material-demo-nj80l

누군가 어떻게 고쳐 지는지 알아?

Risbot 에 2020년 03월 09일

다음 CSS를 추가하십시오.
body {padding-right : 0px! important; }

sandunr 에 2020년 04월 11일

안녕하세요, 내 앱 에서이 솔루션을 사용합니다.
내 구성 요소 <Menu> 및 내 CSS에 disableScrollLock={true} disablePortal={true} id="custom" 추가
#custom { .MuiPopover-paper, .MuiPopover-paper { max-height: inherit !important; } }
이것은 제 경우에 완벽하게 작동합니다. 이 트릭이 도움이되기를 바랍니다.

Vincent-Alibert 에 2020년 04월 22일

Dialogs 작업에서 동일한 문제를 경험했습니다. 다음은 콘텐츠 이동을 제거하고 여전히 기본 페이지의 스크롤을 잠 그거나 스크롤 막대를 제거하는 유일한 솔루션입니다.

해결책:
앱에서 가장 바깥 쪽 컨테이너 div 또는 가장 바깥 쪽 div (전체 앱을 캡슐화하는 컨테이너)로 이동하고 너비를 다음과 같이 설정합니다.

width: calc(100vw - 1px);

1px 는 34px 또는 기타 낮은 값으로 대체 할 수 있습니다. 이렇게하면 대화 상자를 열면 기본 페이지의 스크롤 막대가 숨겨지고 콘텐츠 위치에 어떤 종류의 이동도 생성되지 않습니다. 스크롤은 여전히 기본 페이지에 대해 잠겨 있으며 대화 상자에 대해서도 스크롤이 가능합니다.

fastlogin 에 2020년 05월 18일

disableScrollLock = {true}

당신은 단지 훌륭합니다, 감사합니다

cy-sachin-m 에 2020년 08월 25일

😄1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Material-ui: [모달] 스크롤바 및 패딩 문제

해결책

당신의 환경

관련 문제

8475 # 7431 # 6656 # 8710

가장 유용한 댓글

모든 47 댓글

관련 문제