Vuetify: [Bug Report] VToolbar height is broken

Created on 11 Jul 2019 · 2Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 2.0.0-beta.7
Vue: 2.6.10
Browsers: Chrome 75.0.3770.100
OS: Mac OS 10.14.5

Steps to reproduce

toolbar height is half the page

Expected Behavior

toolbar should be correct height

Actual Behavior

check the example

Reproduction Link

https://codepen.io/gadelkareem/pen/pXYWmL

Other comments

something wrong with flex-basis:auto

VToolbar low bug has workaround

Source

gadelkareem

👍4

Most helpful comment

This is because the root of v-app is a flex column and the toolbar now has flex: 1 1 auto. As a work around for now you can apply the _shrink_ class:

https://codepen.io/johnjleider/pen/QXRdom

Or you can wrap it in a div:
https://codepen.io/johnjleider/pen/RzmKOo

Or you can put it inside content, many options.

johnleider on 14 Jul 2019

👍5

All 2 comments

This is because the root of v-app is a flex column and the toolbar now has flex: 1 1 auto. As a work around for now you can apply the _shrink_ class:

https://codepen.io/johnjleider/pen/QXRdom

Or you can wrap it in a div:
https://codepen.io/johnjleider/pen/RzmKOo

Or you can put it inside content, many options.

johnleider on 14 Jul 2019

👍5

Closing as this is currently the expected behavior.

If you have any additional questions, please reach out to us in our Discord community.

johnleider on 16 Jan 2020

Was this page helpful?

0 / 5 - 0 ratings