ant-design: The `Row` component will overflow when setting gutter
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.4.1
Environment
os: mac os 12, browser: chrome 65
Reproduction link
https://zhuchuji.github.io/antd-issues/
Steps to reproduce
- Layout with
Row
andCol
- Set
gutter
to theRow
What is expected?
The Row
should not overflow
What is actually happening?
The Row
overflows and produces the scrollbar
Antd sets margin-left
and margin-right
to a negative value on Row
to compensate the padding-left
of the first Col
child and padding-right
of the last Col
child, which will make the Row
box larger than its parent as it’s set to box-sizing: border-box
. Users have to provide a container
with padding to ensure the Row
will not overflow, which is a big problem in layout especially in responsive web, because they have to set variables for gutters and calculate it for the padding of the container
. It’s totally inconvenient. If the grid system removes the first column’s padding-left
and the last column’s padding-right
, the Row
does not need a negative margin any more. Perhaps, it could be fixed by adding a container in Row
, so that you don’t have to detect which column is the first child and which is the last.
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 31
- Comments: 41 (4 by maintainers)
You can add a wrapper with
overflow: hidden
as workaround: https://codesandbox.io/s/oonl1ylnvyThere is no solution about this problem now.
Here’s what I think is a better workaround with CSS:
This removes the margins from the Row component and the padding of the first and last Col
Ticket from 2018 and this is still a problem.
Seems like an easy fix that no one has bothered to implement, the above recommend solution works fine with zero side effects.
Any update on this?
Still being an issue in the latest version…
As I told you before, I had this issue as well and I fixed it by changing my layout. So it’s something you can fix as well.
If you have a demo I can take a look, otherwise I can’t remember exactly how I did it.
This solution works! But it’s sad that this problem still exists.
Yes, I can see that it overflows, but as I said before, that’s not a problem. It’s not a problem because the Col is compensating for that. Even in your example, the first column is aligned correctly (they’re not exceeding the parent container)
Sure.
If you follow these two rules you shouldn’t have any problems.
If you’re still having problems maybe you can create a simple demo and I could show you how to fix your problems.
I resolve this using
.ant-row-flex, .ant-row { margin: 0 !important; }
This fails when using responsive breakpoints that cause columns to wrap. The rows that get created when hitting the various breakpoints (i.e. xs, sm, md, et.c) end up with incorrect margins because of the first and last CSS child selectors. This solution will work perfect however as long as you aren’t using responsive breakpoints.
Same here, V5.14.1
Minimal example of horizontal overflow (which results in visible horizontal scroll bar).
https://stackblitz.com/edit/react-3dvczh?file=index.js
Yes, it’s true that wrapping
Row
in a parent div withoverflow-x: hidden
will stop the scroll bar from appearing as suggested by @afc163 , but it would be nice if the library implemented this fix.The only reason this scroll bar issue doesn’t show up in the canonical examples is because the entry point div (i.e.
#container
div) has a padding of 24px, which exceeds half the maximum gutter size, thus the negative margins applied to the first and lastCol
in aRow
don’t pierce the#container
div’s padding.We solved by wrapping Row in a
<section>
withbox-sizing: border-box
This problem is not only in Row, but also in Form.Item. The official example also has unnecessary scrollbars, when the width is small enough. https://codesandbox.io/s/6dtwbj When the width is small enough, the ‘wrapperCol’ should be ignored or the ‘offset’ should be 0.
+1
running v4.8.0
I think this is solved in other grids. I wrote this SCSS grid generator 5 years ago that solves the issue by using
padding-left
on the cells for the gutter (instead of using both left and right), and negativemargin-left
on the row to offset the gutter. The overflow happens on the left, so you don’t get right scrolling overflow (left overflow is ignored by the browser)example here: http://matthewlein.github.io/yellowgrid/