Vuetify: [Bug Report] Inside toolbar label is not displayed properly for v-switch

Created on 4 Nov 2017  路  4Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: v0.16.7
Vue: v2.5.2
Browsers: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.18 Safari/537.36
OS: Mac OSX

Steps to reproduce

Create v-switch with label in a v-toolbar component.

Expected Behavior

Expect label to be displayed properly.

Actual Behavior

Label is not displayed.

Reproduction Link

https://codepen.io/anon/pen/zPqaGw?editors=1011

Most helpful comment

@jlyon87 It's compatible with v-toolbar. You just have to use "hide-details" prop on v-switch.
https://codepen.io/anon/pen/erQPQo

By default, the form components have a small space below that is used to display hint and validation errors :)

All 4 comments

The v-toolbar-items component is strictly for wrapping v-btn.

https://codepen.io/johnjleider/pen/BmzLRx?editors=1011

v-switch doesn't seem to be compatible with v-toolbar.
https://codepen.io/anon/pen/vpebVy?editors=1011

I've tried a few different methods. Putting the switch just inside the toolbar, putting the switch inside a v-btn.

In John's codepen, the switch is not vertically centered.

I am also trying to center the switch vertically

@jlyon87 It's compatible with v-toolbar. You just have to use "hide-details" prop on v-switch.
https://codepen.io/anon/pen/erQPQo

By default, the form components have a small space below that is used to display hint and validation errors :)

Was this page helpful?
0 / 5 - 0 ratings