Material-ui: [网格]容器和滚动条的额外宽度

创建于 2017-07-19  ·  49评论  ·  资料来源: mui-org/material-ui

<Grid container>扩展到其父级之外,间距大小的一半。
我用红色标记了多余的宽度,也将间距设置为零可以解决此问题。

mobile-padding

这是一个工作示例: https :
零间距的类似代码按预期工作: https :

bug 🐛 Grid important

最有用的评论

仍然存在相同的问题,但是通过添加xs = {12}得以解决。
<Grid container spacing={3} xs={12}>

所有49条评论

在flexboxgrid上发现了
我已经检查了引导程序在做什么,它们没有此间隔功能,因此最终没有问题。

因此,您有3种可用的解决方法:

  • 不使用间隔功能并在用户区spacing={0}上实现它,我们可以将其设为默认行为。
  • 至少使用间距值在父项上添加填充: https :
    <div style={{ padding: 20 }}>
      <Grid container spacing={40}>
  • 在父级上添加overflow-x: hidden;

我要关闭了,因为我想不出更好的选择。 如果有人对间距功能有更好的解决方案,请提高声音:)。

在我看来, spacing={0}应该是默认行为。 至少要等到更好的解决方案出现为止,因为对于第一次使用material-ui的用户来说,这似乎是<Grid />的错误。

@hboylan鉴于存在所有限制的问题,我开始感到奇怪! 我希望我们可以访问一些API使用情况分析。

我添加了waiting for users upvotes标签。 我不确定人们会喜欢使用spacing={0} 。 因此,如果您愿意,请支持此问题。 我们将根据投票的数量确定工作的优先级。

至少有8个重复问题是一个强烈的信号。 我将在文档中添加有关此限制的注释。

只是想知道:使用您描述

如果没有,您可以默认将其添加到Grid-container-Component中吗?

更新:
=>愚蠢的我;)当然:很抱歉,我们正在失去空间。

我无法在容器中使用spacing={0}或其他两种解决方案中的任何一种(包括overflowing-x等)在material-ui @ next中修复此问题。 也许我想念什么?

flexboxgrid( @oliviertassinari提到了同样的问题)有一个分叉声称已经修复了它。 https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572我尚未深入研究代码,但值得研究一下是否可以在Grid中使用。

你好

我们最近开始为我们的一个项目采用此库。

当我们发现此线程时,您可以想象我们的惊讶。

基本上,这是一个由于最新的材料下一个版本而没有解决方法的错误。 这令人担忧。
更令人担忧的是,我们现在已经在文档中添加了讨论“限制”的文字,而不是修复此错误。

你们有关于错误和错误修正的任何程序吗? 还是一切都当场决定?


这是1.0.0预发行版:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

从这个线程推断,我们是否应该假设1.0.0-prerelease实际上比我们看到的有更多的bug? (例如,此问题)

你们到目前为止在github上关闭了多少个有效的Material-ui错误,而不是修复您在文档中添加的文本?

否则,框架就很棒。 程序有点令人担忧。

谢谢,如果您冒犯了他人和/或变得有点坚强,我深表歉意。

@kmlx

我们是否应该假设1.0.0-预发布Beta实际上比我们看到的错误多得多?

您当然应该(请参阅:问题)。 而且您应该期望1.0.0-rc.x也存在错误,但是API基本上是稳定的。

@ryanflorence鸣叫时间非常完美。

如果我冒犯了别人和/或我变得坚强,我深表歉意。

如果您知道自己遇到了一些麻烦,请不要道歉; 重新思考您想说的是什么,以及您想如何说。 (也许看看您从开源中获得了多少价值,与您贡献了多少,并确定您的投诉是否具有重要意义。)

更好的是,如果文档中提供的解决方法还不够,请坚持使用CSS,看看您是否可以解决困扰您的限制。

@mbrookes

感谢您抽出宝贵的时间回复。

您当然应该(请参阅:问题)。 而且您应该期望1.0.0-rc.x也存在错误,但是API基本上是稳定的。

很高兴听到该API将基本稳定。 作为任何项目,我都认为会有许多未发现的问题。

不过,目前此问题的解决方法不起作用,问题本身已经关闭。
根据您之前的消息,此flexboxgrid分支可能会提供解决方案。
我假设从8月1日开始的提交就是那些应该寻找解决方案的提交。

如果已记录的解决方法不再起作用((我目前在移动设备上,因此无法测试),则需要重新打开此问题。

感谢您调查修复。

我没有问题,我的解决方案是在代码中的每个<Grid container /><Grid item container />组件中手动执行spacing={0}

@kmlx我已经使用beta.22成功测试了建议的解决方法。 如果您找到永久解决方案,请随时报告。

我添加了spacing={0}但实际上想要间距,所以我添加了填充,并使其仅在显示两个列的中等断点上方添加了填充:

const styles = theme => ({
  dividerRight: {
    [theme.breakpoints.up('md')]: {
      paddingRight: theme.spacing.unit * 0.5
    }
  },
  dividerLeft: {
    [theme.breakpoints.up('md')]: {
      paddingLeft: theme.spacing.unit * 0.5
    }
  },
});

然后我在左列中添加了className={classes.dividerRight} (因为分隔符在右边),在右列中添加了className={classes.dividerLeft}

刚遇到这个问题。 通过将以下CSS添加到网格的容器中来解决它,看起来不错

.grid-container {
  width: 100% !important;
  margin: 0 !important;
}

@martjoao对我来说,这导致我的网格容器外部出现不必要的填充(我内部的元素应该与边缘齐平)。

我对此的快速而肮脏的解决方案是在body元素上抛出overflow-x: hidden; 。 但是,在某些浏览器(尤其是移动浏览器)上,当您滚动时,水平滚动条会闪烁一秒钟,向用户指示它们可以向右滚动。 这对我来说仍然是不可取的。


编辑:

刚刚看到了上面提到的溢出方法。 我的错。

我认为值得注意的是<Grid>的预期用法是_not_应用程序/主布局(例如,应用程序栏,侧栏,内容区域等)。 它实际上是为了在网格中分布内容元素(例如,配置文件列表)。 考虑到这一点,将元素留有边距以使它们的内容区域不受影响(例如,您可以添加背景色或边框)是有意义的。

但是文档建议<Grid>元素应用于主要布局,方法是使用一个名为“ Layout”的完整部分来描述<Grid>的用法。

许多人发现这种违反直觉的另一个原因是因为所有其他UI框架都提供了一种进行主布局的机制(这被认为是80%的情况,@ oliviertassinari),而布局内容项网格是次要的问题。

但文件显示元素应用于主要布局,其整个部分名为“布局”,用于描述

@wmadden为什么使用布局措辞会让您认为它与应用程序/主布局有关?

许多人发现这种违反直觉的另一个原因

什么违反直觉?

被认为是80%的情况

我同意,我们有:#10986。

@wmadden为什么使用布局措辞会让您认为它与应用程序/主布局有关?

它在称为“布局”的顶层部分中,而不仅仅是组件演示。 和这样的措辞:

网格在布局之间创建了视觉一致性,同时允许各种设计的灵活性。 Material Design的响应式UI基于12列网格布局。

让我假设使用它来布局我的应用程序是适当的-负边距限制很快成为一个问题。

许多人发现这种违反直觉的另一个原因

我的意思是人们发现不应该将Grid组件用于主布局是违反直觉的,因为UI框架通常为此目的提供布局解决方案-并且通常在称为“布局”的顶级文档主题中。

在React中,一个普遍的假设是子代将被其父代包含。 <Grid>的负边距超出了其父级的边界,从而打破了这一假设,这使得它的行为对于那些不知道是设计使然的人来说就像是个小虫。

@ vedant1811负边距不再是默认行为。 您应该可以在没有网格的情况下将其用于应用程序级别的布局。

@oliviertassinari是否有更新对此进行了更改? 只想知道我是否需要更新软件包的版本。 我之前在父元素上使用overflow: hidden;

@saricden是的,通过不提供spacing属性,那里可用的大多数网格库都没有此功能,它们使人们可以处理利润。

我刚遇到这个。 似乎又是一种骇人听闻但可行的解决方法是在网格容器上放置一个宽度:“ calc(100%-16px)”……至少对于我在小屏幕尺寸下的情况而言。

在不同的断点处使用不同的宽度玩耍可能会改善这一点,但是当屏幕产生一个更宽的容器时,问题就不那么明显了。

仍然存在相同的问题,但是通过添加xs = {12}得以解决。
<Grid container spacing={3} xs={12}>

仍然会发生此问题。 添加spacing={...}会导致水平滚动。 添加xs={12}不能解决问题。

_物有所值:_
我正在使用Material-UI 4.5.0遇到此问题。 由于某种原因,我现在才注意到这一点,并且我已经使用Material-UI一年多了。

除了边距样式外,我还尝试了上面的xs={12}建议(因为我在右侧看到了额外的边距),以下内容在视觉上产生了所需的效果:

const useStyles = makeStyles(theme => ({
  grid: { margin: theme.spacing(0) }
}));
...
<Grid container spacing={2} xs={12} className={classes.grid}>

_但是..._我在控制台中收到警告:

警告:道具类型失败: xs的道具Grid必须在item

因此,我没有在容器上使用xs={12} ,而是复制了它添加到makeStyles()的样式。 到目前为止,以下似乎对我有用:

const useStyles = makeStyles(theme => ({
  grid: {
    margin: theme.spacing(0),
    flexGrow: 0,
    maxWidth: `100%`,
    flexBasis: `100%`
  }
}));
...
<Grid container spacing={2} className={classes.grid}>

只有maxWidth: 100%可以完成这项工作。 但是,现在宽度已扩展到最大。 如果我设置一个特定的maxWidth值,这将不起作用。

我已经使用样式化的组件修复了此问题,以便将Grid容器边距设置为零。

样式化网格容器:

const GridContainer = styled(Grid)`
  margin: 0;
`;

现在使用GridContainer,而不是生成额外宽度的Grid组件。

      <GridContainer
        container
        direction="column"
        justify="center"
        alignItems="center"
        xs={12}
        spacing={2}
      >

我用了组件位于100%宽度和高度的包装器内,但是我遇到了这个问题,即容器将页面拉伸超过100vw并导致水平溢出。 我不明白为什么要为此使用负边距? 我不得不覆盖默认样式,以使页面回到边界:

const NormalizedGridContainer = withStyles(theme => ({
  root: {
    width: '100%',
    margin: '0px',
    padding: `${(spacing/2) * 8}px`
  }
}))(Grid);

IMO应该更加清楚地表明,Grid容器不打算用作应用程序的包装。

在桌面尺寸下,我的图像全部伸展到一边,并用xs = {12}固定,奇怪的是出现了填充。 就我而言,此修复程序看起来像@martjoao的解决方案,但仅移动宽度:
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

我遇到了类似的问题,并通过以下方式解决:

body { margin: 0; padding: 0; }

最终做下面的事情:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

这样就解决了问题。

我也正面临着这个问题,并且看着与数量相关的问题,我想知道在Material-UI中解决这个问题是否有意义。

我们基本上不能像他们在这里一样做: https :

遇到同样的问题,通过做一个半修复

<Container maxWidth={false}>
  <Grid container spacing={3}>
    <Grid item />
  </Grid>
</Container>

仍然存在相同的问题,但是通过添加xs = {12}得以解决。
<Grid container spacing={3} xs={12}>

这对我来说已解决...谢谢!

仍然存在相同的问题,但是通过添加xs = {12}得以解决。
<Grid container spacing={3} xs={12}>

这对我来说已解决...谢谢!

很棒的解决方案! 这也为我们解决了。 我们必须添加container item来防止容器+ xs警告。

在添加overflow-x: hidden之后解决了该问题; 在父级上,就像在Container内有mui-datatable一样,因此在容器中添加了overflowX: 'hidden'

最终做下面的事情:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

这样就解决了问题。

谢谢,这是我唯一可行的解​​决方案。

_Seems_为我工作而忽略了margin 0 !important


const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        // margin: "0 !important"
      }
    },
  }
});

这个UI框架有很多错误,这使我感到困惑。 您的

网格应该属于任何地方。 Bootstrap允许它无处不在。 他们甚至可以抵消这些边际漏洞。

这会解决吗?

@SomnathKadam

在添加overflow-x: hidden之后解决了该问题; 在父级上,就像在Container内有mui-datatable一样,因此在容器中添加了overflowX: 'hidden'

问题是您仍然可以滚动。 溢出-x:隐藏不是一个好的解决方案

MuiGrid:{
容器: {
宽度:“ 100%!重要”,
边距:“ 0!重要”
}
},
@ rag4214
这是强行修改整个框架的结构,因此不建议这样做。 您可以将其固定在一个地方,而将其破坏在另一个地方。

我很震惊,我已经使用MUI大约两年了,之前从未见过。 仍未弄清其发生原因。

最终做下面的事情:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

这样就解决了问题。

这个解决方案对我有用。

这已经进行了很长时间了,如果无法立即修复,它应该成为文档的一部分。

有没有解决办法?
我遇到此问题,并考虑使用overflow-x: hidden ,您如何看待?

问题仍然存在。 解决方案溢出-x:父对象上的隐藏属性

只是另一个破解,对我有用;)

const useStyles = makeStyles((theme) => ({
 root: {
    '& .MuiGrid-root': {
      width: 'calc(100% - 2px)',
    },
  },
// [...]

这些2px似乎是在我的网格定义下方添加的,因此其他人的实际值可能会有所不同...

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

gndplayground picture gndplayground  ·  54评论

tdkn picture tdkn  ·  57评论

NonameSLdev picture NonameSLdev  ·  56评论

HZooly picture HZooly  ·  63评论

cfilipov picture cfilipov  ·  55评论