Vuetify: [Bug Report] style different with npm run serve and npm run build(v-bottom-navigation and v-dialog)

[cheneyweb]

Environment

Vuetify Version: 2.0.0
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

npm run build

Expected Behavior

css style correct

Actual Behavior

it only display correct with npm run serve

but the css error with npm run build

the follow css is been remove with npm run build
.v-bottom-navigation--fixed {
position: fixed;
}

Reproduction Link

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

[jacekkarczmarczyk]

The simplest fix would be to add !important. I'm aware that imporant sux, there are other ways to increase specificity, but i think in this case it's more like trump class (like .text-left etc where we use `!important)

But I think that the proper fix would be to use bottom navigation as a container, so VItemGroup should be rendered inside of the navigation instead of mixing these two functionalities:

render () {
  return h('div', { class: 'v-bottom-navigation ...' }, [
    h(VItemGroup, [contents])
  ])
}

Wouldn't be that a bit breaking change?

Another thought - app bottom bar could be used a container and make bottom navigation "positionless"

[cheneyweb]

@jacekkarczmarczyk
I have upgrade to vuetify 2.0.1, the v-dialog css style has been fixed，but the v-bottom-navigation's position still error

but I find out npm run serve is the same too!
now npm run serve & npm run build show the same!

But hat still puzzles me is the usage of v-bottom-navigation，I follow the official doc to copy the code to my project.

Is there any v-bottom-navigation demo for the right way to use? how to make it position fixed on the bottom and make the button style correct? There follow is my layout:

[andrewlamyw]

I'm also having difficulty to make the v-bottom-navigation to fixed at bottom.

[jacekkarczmarczyk]

but the v-bottom-navigation's position still error

That's why the issue is still open. You can override the styles with .v-bottom-navigation--fixed: { position: fixed !important } until we fix this

[cheneyweb]

but the v-bottom-navigation's position still error

That's why the issue is still open. You can override the styles with .v-bottom-navigation--fixed: { position: fixed !important } until we fix this

yes, with override the styles, I have fixed the position problem，but there is still a problem about the v-btn inside the v-bottom-navigation

The button is not vertically centered，how can I fix this problem?

And will next version of vuetify fix the v-bottom-navigation style?

[jacekkarczmarczyk]

Please create a separate issue for button problem

And will next version of vuetify fix the v-bottom-navigation style?

Probably, no guarantee

[cheneyweb]

thanks, I will create another issue for the v-btn

the v-bottom-navigation is really a important component for mobile web app :)

[lleonk]

>

The button is not vertically centered，how can I fix this problem?

The problem is the height of the button.

I've fixed this by adding

#app .v-bottom-navigation .v-btn {
  height: inherit !important;
}

in my App.vue file.