Vuetify: [Bug Report] <v-tooltip> with <v-btn> not centered in the toolbar

Created on 13 Feb 2018  路  6Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.0
Vue: 2.5.13
Browsers: Chrome 64.0.3282.140
OS: Windows 10

Steps to reproduce

Add a tooltip around a button inside a <v-toolbar>. You'll notice the icon being pushed the to top in the example.

Expected Behavior

Icon buttons should be centered in toolbar

Actual Behavior

Icon buttons are pushed to the top (no center alignment)

Reproduction Link

https://codepen.io/anon/pen/WMEELP?&editors=100

bug

Most helpful comment

fixed in becd4843fdd766e4a59ee2dbd99760f18db7d340

All 6 comments

.tooltip, .tooltip>span{
height: inherit;
}

Making it not inherit height seems to fix the problem

I added this class to each tooltip.

 .toolbar-fix{
        height: auto;
    }

I had this same problem. used same fix.

fixed in becd4843fdd766e4a59ee2dbd99760f18db7d340

@johnleider
Doesn't look like it fixed on version 1.3.7
Difference here is toolbar-items
https://codepen.io/atilkan/pen/VVzgxK?editors=1000

I have the same issue, how to fix it while waiting for an official change?

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.

EDIT: this is a different issue, the original one didn't use v-toolbar-items @atilkan

Was this page helpful?
0 / 5 - 0 ratings