Vuetify: The proper way to remove paddings on v-container

Created on 6 Jun 2017 · 11Comments · Source: vuetifyjs/vuetify

It's seems the application layout must have a v-container to work properly. But v-container has paddings and there is no way to gaplessly fill viewport by content: if we reset left and right paddings the mysterious scroll appears (see https://github.com/vuetifyjs/vuetify/issues/698)

invalid

Source

Darkside73

Most helpful comment

This will be changing in 2.0. The grid system is a bit dated and is receiving a face lift.

johnleider on 22 Oct 2018

🎉5 👍4

All 11 comments

v-container fluid doesn't do the trick?

mornir on 6 Jun 2017

No. Same issue

Darkside73 on 6 Jun 2017

Right now the only way to do this would be with a helper class, pa-0. The container is designed to provide the specified padding according to MD. I know you had another ticket that references an issue on NUXT and I'll be taking a look at that as well.

johnleider on 6 Jun 2017

Ok. Thanks

Darkside73 on 6 Jun 2017

Following up. fluid is simply for removing the viewport specific max-widths. The container by default should have padding to match spec. So in this case, my previous answer of simply adding pa-0 would be the solution.

johnleider on 10 Jun 2017

I had the same issue. I just removed v-container and just have v-layout now.

mitar on 30 Oct 2017

👍6

pa-0 works for v-container when fluid is not present, the work case for me is

      <v-container ma-0 pa-0>
        ...
      </v-container>

Well, v-container brings me much headache, removing it is a good choice...

LiangNex on 29 Sep 2018

👍4

Following up. fluid is simply for removing the viewport specific max-widths. The container by default should have padding to match spec. So in this case, my previous answer of simply adding pa-0 would be the solution.

fluid have litle paddings on md size, but i want no paddings on xs,sm

alex-eri on 14 Oct 2018

This will be changing in 2.0. The grid system is a bit dated and is receiving a face lift.

johnleider on 22 Oct 2018

🎉5 👍4

can any one write here the code for how to add a class in a v-container,
i am asking this here to follow the best Practice

TIA

alimuhammed37 on 21 Dec 2018

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.