.row add verticall and horizontall scroll 6.3.0

[juniovitorino]

Hi, 6.3.0 is adding vertical and horizontal scroll in chrome device simulator and how I'm not using .container or .container-fuild (with it also have no effect).

I'm really lost without know how I can remove this scrolls.

Have some version that is without this bug?

[ghost]

I also have noticed that .row will stretch elements to a width of over 100%. This is likely the reason for it; I was able to workaround this issue by setting margin: 0 in .row.

[robmerki]

I came up with a similar solution as @kdex, but this messes up a bunch of my columns. Going to hack my way around it.

[kristoferjoseph]

OK this issue comes up a lot. I am changing the way this works in the next release and I apologize for the confusion it has caused people. I personally have never had this issue in my projects so it has been hard for me to diagnose.

in case you want to learn more about it read on:

It stems from the gutters between columns inside rows. The negative margins on the row are to compensate for the outer margins of the columns for when the row wraps. The flex-wrap property allows a multi-column layout to become a single column layout without having to add any code. This is part of the ✨ "magic"✨ of flex-wrap, but if you don't have the correct padding ( supplied by the undocumented container that was copied in a PR from bootstrap ) and negative margin in a row it can cause the contents margins to overflow the available width. This was recently compounded by a change in how browsers do percentage rounding, so basically a 💩 sandwich of fail.

Thank you for your patience. I have a fix and it will land in the next major release that I have been actively working on again.

[felquis]

@kristoferjoseph was it fixed in v6.3.2?

[brandensilva]

@kristoferjoseph can you tell us the fix you are thinking of so we can work through this in existing projects?

[yanickrochon]

The current problem is that :

1. .container sets margin to auto, which is 0 at render time in this case;
2. .row adds margin-left and margin-right of -8px, thus going out bound;

The fix would be to have the .container margin be at least 8px to compensate for the .row's margin.

At the moment, changing margin-left: auto; to margin-left: 8px; (and the same for margin-right) solves it.

** EDIT **

This works; it negates the margin on the rows :

.container-fluid, .container {
  margin-right: calc(var(--gutter-compensation, -0.5) * -1);
  margin-left: calc(var(--gutter-compensation, -0.5) * -1);
}

[yanickrochon]

Actually, there is another issue, about fixed width containers

@media (--sm-viewport) {
  .container {
    width: var(--container-sm, 46rem);
  }
  ...
}

Shouldn't it be

@media (--sm-viewport) {
  .container {
    max-width: var(--container-sm, 46rem);
  }
  ...
}

??

[yanickrochon]

I ended up removing a lot of padding and margin, and resizing the columns, and removing some unnecessary vars. But this works for me so far.

[yanickrochon]

I have create a fork, here, that I use and it seem to work well so far. I actually renamed a few classes, so anyone using it will have to change, for example

<div class="col-xs col-sm-3 col-offset-sm-4">

to

<div class="col xs sm-3 offset-sm-4">

[lukeify]

@kristoferjoseph Hey I don't mean to be naggy, but has there been any updates or progress on this issue? I found the negative margins a bit bizarre too.

I'm happy spend some time writing a PR to mitigate this issue if you'd like.