Vuetify: [Bug Report] v-container has full width on breakpoints

[iamareebjamal]

Environment

Vuetify Version: 2.0.7
Last working version: 1.5.17
Vue Version: 2.6.8
Browsers: Chrome 75.0.3770.100
OS: Linux x86_64

Steps to reproduce

Use non fluid container in 1.x and 2.x and compare

Expected Behavior

Use any 1.x release and notice that max-width of the container is always less than the breakpoint. This is what gives it a distinctly different look than fluid container.

This is also true for bootstrap grid system and all others I know

Actual Behavior

max-width is same as breakpoint min-width, which completely breaks the purpose of the non-fluid container at the breakpoint width

Reproduction Link

https://codepen.io/iamareebjamal/pen/JjPKMLM

[iamareebjamal]

2.x https://deploy-preview-367--roboclub.netlify.com/
1.x https://amuroboclub.in/

[jacekkarczmarczyk]

Please do not add full projects as a repo, create a minimal one, best in codepen

[iamareebjamal]

I have updated the reproduction link. It spans full width in container whereas Vuetify 1 spanned less. It's breakpoint specific bug so you need to adjust the width to be at breakpoint. I don't know how reproduction helps here as the bug is just that the max-width of container at breakpoints used to be less than the breakpoint width itself. Like in every other framework and bootstrap (which was the inspiration of grid implementation changes.

V2:
https://github.com/vuetifyjs/vuetify/blob/7f79ac33b7c54494dd3b5ed3ef042699b53c03ec/packages/vuetify/src/components/VGrid/_grid.sass#L66-L73

V1:
https://github.com/vuetifyjs/vuetify/blob/a03714b545fd828f5b59550127cdd6ee01ad4c59/packages/vuetify/src/stylus/components/_grid.styl#L9-L11

[DmytroDiachuk]

I was going to write a similar request. I agree with @iamareebjamal
I have monitor with 1920px. Component v-container (without fluid) like v-container with _fluid_. It is not good view, especially with full text content.

[KaelWD]

• bootstrap's highest breakpoint is 1200px, ours is 1904px
• 1.x was using 0.9375x the breakpoint for the max width: https://github.com/vuetifyjs/vuetify/blob/4f14ba7d31c130f631283253963696a38a93b14a/packages/vuetify/src/stylus/components/_grid.styl#L9-L11
• but now we just use it directly because they changed how the max-width is derived without me realising: https://github.com/vuetifyjs/vuetify/blob/cb045a2736541eacd2c6745e95106293e462d642/packages/vuetify/src/components/VGrid/_mixins.sass#L8-L11

If this is a big problem for you you can change the $container-max-widths sass variable: https://vuetifyjs.com/en/customization/sass-variables

[iamareebjamal]

I have changed it, but would rather not have tree shaking enabled in debug builds because it slows it down a lot

[lutzklai]

What is the proper way to implement the workaround? I have followed the guide but am having trouble getting my $container-max-widths to override vuetifys

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

$container-max-widths: map-merge($container-max-widths, (
    'sm': '980px',
    'md': '1185px',
    'lg': '1785px',
    'xl': '1185px'
))

[iamareebjamal]

https://github.com/open-roboclub/roboclub-vue/blob/master/assets/variables.scss

https://github.com/open-roboclub/roboclub-vue/commit/b76b3803a1f80dd8ea4f4a0131e6fff3f92d480e

[Pedrat]

Any updates on this? It's happening to me aswell

[ArtyomBist]

have simular problem with last vuetify version, breakpoint is not working for xl

[gtl-alex]

This is still an issue on the latest non-beta version (2.1.14). The methods posted here don't seem to work.

[egeersoz]

Any news on this?

[KaelWD]

It was fixed in v2.1.0

[gtl-alex]

@KaelWD Are you sure? I ran into this issue on version 2.1.14.

[KaelWD]

https://codepen.io/kaelwd/pen/QWwmovw