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

  1. Layout with Row and Col
  2. Set gutter to the Row

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)

Most upvoted comments

You can add a wrapper with overflow: hidden as workaround: https://codesandbox.io/s/oonl1ylnvy

There is no solution about this problem now.

Here’s what I think is a better workaround with CSS:

.ant-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.ant-col:first-child {
    padding-left: 0 !important;
}

.ant-col:last-child {
  padding-right: 0 !important;
}

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.

Here’s what I think is a better workaround with CSS:

.ant-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.ant-col:first-child {
    padding-left: 0 !important;
}

.ant-col:last-child {
  padding-right: 0 !important;
}

This removes the margins from the Row component and the padding of the first and last Col

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.

  1. Rows should have as children only columns, and nothing else (do not nest directly one row in another row)
  2. Columns should have as parents only rows (sometimes you can make a mistake by having a column as a child of another column)

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; }

Here’s what I think is a better workaround with CSS:

.ant-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.ant-col:first-child {
    padding-left: 0 !important;
}

.ant-col:last-child {
  padding-right: 0 !important;
}

This removes the margins from the Row component and the padding of the first and last Col

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 with overflow-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 last Col in a Row don’t pierce the #container div’s padding.

We solved by wrapping Row in a <section> with box-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

+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 negative margin-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/