[Bug Report] New Grid System Negative Margins

[VeronicaGavrila]

Environment

Vuetify Version: 2.0.7
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10

Steps to reproduce

Using v-row creates a negative right margin that causes overflows / horizontal scrolling on mobile.

Is there any solution to get rid of this instead of adding ma-0 to every row? Is this the expected functionality?

Thank you!

Expected Behavior

Should not cause any problems with overflow / horizontal scrolling.

Actual Behavior

Causes issues with overflows / horizontal scrolling, especially on mobile.

Reproduction Link

https://codepen.io/VeronicaGavrila/pen/mdbEQLM

[VeronicaGavrila]

This issues occurs when I use a v-row inside a v-col. Does the v-row ALWAYS need to be inside a v-container? Can't I use v-row inside a v-col for example?

Thanks!

[runyasak]

I'm not sure that there have any use case for using row without wrapping col.

Actually, the point of negative margin in row is supported nested columns case when they attract each other. You can see some description from here, Why negative margin in row - Stackoverflow

For my advice, I recommend you to use v-row to wrap v-col that include with your content.

<v-row>
  <v-col>
    <span>
       testing stuff
     </span>
  </v-col>
</v-row>

Hope that it would be help 😎

[VeronicaGavrila]

Thanks,
I now understand why they have negative margins.

But, even if I wrap the contents of a v-row in a v-col, the same issues remain. For example:

<v-col md="9">
    <v-row justify="center">
        <v-col class="shrink">
            /* Button. Other Content.*/
        </v-col>
    </v-row>
</v-col>

Do I need to wrap the v-row in a v-container? It can't be the direct child of the v-col?

Thanks again!

[runyasak]

@VeronicaGavrila
No need to wrap with v-container, but v-col must be wrapped with v-row.

[VeronicaGavrila]

Hey, @runyasak

In the previous example all of the v-cols are wrapped in a v-row but I still get negative margins and overflowing x axis.

I can fix it if I add a v-container, and the full code hierarchy will be something like this:

<v-app>
    <v-content>
        <v-container>
             <v-row>
                  <v-col>
                       <v-row>
                            <v-col>
                                 <--! We are here-->
                                 <v-row>
                                      <v-col>
                                      </v-col>
                                 </v-row>
                            </v-col>
                       </v-row>
                  <v-col>
             </v-row>
        </v-container>
    </v-content>
</v-app>

Is something wrong with the above code that it needs the v-container? If I do not put a v-container where the "We are here" comment is, I will have a negative margin and overflow on X.

Thanks again!

[VeronicaGavrila]

@runyasak

Okay so the issue is not from the way I nested the grid elements but from the additional padding that I added to the last v-col.

[runyasak]

For v-container, you will need when you want contents arrange at the center of your site.
I'm not sure about the best practice of container but actually, you can use v-container for some specific area that you want content in the center.

You can read more information from here, Grids usage - Vuetify

[MikeMitterer]

Hmm - I'm having the same problem. "Grids usage" is not very helpfull at all but in this special case the "Grids usage" page use most of the time "no-gutter" which sets margin-left to 0.

Here you can see that margin-left is negative by default...
https://github.com/vuetifyjs/vuetify/blob/3a9fdc292af97c98be91c014bde1fac40a96e865/packages/vuetify/src/components/VGrid/_mixins.sass

[jmarshall9120]

Just a point to shout back to here. This is being done all over the Vuetify docs where row is used with no internal column. Here is a recent example I just tripped over.

1. Is it in-fact the recommended practice to always use <v-row> and <v-col> together?
2. Should the docs be changed to reflect this?

[chris-oleson]

This is still a problem. -12px margins on all sides of rows, causing weird mobile horizontal scroll behavior.

[keithrz]

The most straightforward workaround I've found so far is to use no-gutters prop for all of my v-row components, but that makes things too dense for my liking.

ETA: I ended up using padding everywhere, e.g.

<v-row no-gutters class="pb-4">
  <v-col class="pe-5">

[KaelWD]

I'm exploring replacing this with gap for v4