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-beta.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修复仅在您的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：17像素；
padding-left：17px;
padding-bottom：0px;
溢出-x：隐藏;
overflow-y：auto！important //如果希望滚动条消失，请删除！important
}
``

chrisshaddad 于 2018-07-10

👎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（标头的高度为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和其他弹出式元素。默认情况下，此boolean属性为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 （登录），它具有打开第二个Modal （SignUp）的链接，该链接本身具有返回到登录名的链接。

在这种情况下，我是否必须使用ModalManager轻松添加和删除Modal ？抱歉，我们没有找到有关此问题的任何文档。

rememberYou 于 2018-09-10

👎1

@nathanmarks是的，看起来模态组件文档页面仍然没有提到.mui-fixed

lorensr 于 2018-09-10

使用3.5.1-对话框在关闭前向左移动。

可在此处复制https://material-ui.com/demos/dialogs/-打开并关闭“简单对话框”演示。

经过测试后，此操作从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固定在哪里？我选择打开菜单时遇到此问题。

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 Modal组件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显然我的搜索能力不是很好。谢谢！

WholemealDrop 于 2019-12-17

@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 于 2019-12-18

@archfz您能创建一个codeandbox吗？（您可以从docs示例之一开始。）

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

使用对话框时，我遇到了同样的问题。以下是我尝试过的唯一解决方案，既可以消除内容的偏移，又可以锁定基础页面的滚动/移除滚动条。

解：
转到应用程序中最外面的容器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条评论

相关问题