[Bug Report] v-bottom-navigation's v-btn are't Vertical Centralization

[cheneyweb]

Environment

Vuetify Version: 2.0.1
Last working version: 1.5.16
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Mac OS 10.14.6

Steps to reproduce

use v-bottom-navigation follow the doc

Expected Behavior

the text and icon Vertical Centralization

Actual Behavior

the text and icon Centralized at the top

Reproduction Link

https://codepen.io/cheneyweb/pen/MNeEVe

[jacekkarczmarczyk]

Can't reproduce in codepen

[cheneyweb]

Can't reproduce in codepen

I don't know why it work find with codepen，but It do have problem with my localhost env.

even I ceate a new vue project with vue-cli and follow the doc to install plugin，I only write one v-bottom-navigation for test，and this problem still happen.

It really confuse me

[cheneyweb]

@jacekkarczmarczyk

Finally, I find out how to fix this problem!

I have try a lot of times，and I find out if I append in the App.vue，the style of v-bottom-navigation will be correct !!!

I don't know why, but it work for me now.

and I still hope vuetify can fix this style problem as soon as possiable

[jacekkarczmarczyk]

If the buttons show differently in dev and production mode please provide similar information like in another bottom nav issue (screenshots of devtool in both modes etc), otherwise we will have to close the issue as not being able to reproduce (and therefor provide a fix)

[cheneyweb]

If the buttons show differently in dev and production mode please provide similar information like in another bottom nav issue (screenshots of devtool in both modes etc), otherwise we will have to close the issue as not being able to reproduce (and therefor provide a fix)

Here is the npm run serve result：

And Here is the npm run build result：

And If I kill the .v-btn:not(.v-btn--round).v-size--default height:36px style，everything is ok

So the reason of npm run serve different with npm run build is the order of CSS is different

The follow css code will fix this problem

`<style>
.v-bottom-navigation--fixed {position: fixed !important;}

.v-item-group.v-bottom-navigation .v-btn {height: inherit !important;}
</style>`

[alamhubb]

<style>
    .v-item-group.v-bottom-navigation .v-btn.v-size--default {
        height: inherit;
    }
</style>

[johnleider]

This is hard to reproduce simply because we have no control over CSS ordering and it's random. With this being said, this will not be an issue for the framework in version 3.

I'm going to close this as a duplicate of #5681 and #3583 as it pertains to them.

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

[kasperskov909]

FYI I can reproduce in Vuetify 2.3.9.
Just if you happen to land here from Google.

The build config renders some button styling with explicit height above the regular height:inherit from .v-item-group.v-bottom-navigation button styling.

Just apply height: inherit; to your respective buttons in your bottom navigation component.

[neelansh15]

Adding on to this,

• I had the issue where the bottom nav would sink in and disappear even without the hide-on-scroll prop. I just had the fixed and app props. It was surprisingly fixed by setting body overflow to hidden in the layout.
• Also, in dark mode the background colour was lighter for the buttons and the padding was lesser in prod than in yarn dev.

Here is my complete bug fix in the style section of my default layout:

body{
  overflow: hidden;
}
.v-item-group.v-bottom-navigation .v-btn.v-size--default {
    height: inherit;
    background: #2e2e2e;
    padding: 0 1.3rem;
}

[johnleider]

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.

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