Vuetify: [Bug Report] FAB icon not centered vertically
Versions and Environment
Vuetify: 1.0.17
Vue: 2.5.2
Browsers: Chrome 66.0.3359.139
OS: Windows 10
Steps to reproduce
Just load page.
Expected Behavior
FAB icon centered vertically
Actual Behavior
FAB icon not centered vertically
Reproduction Link
https://codepen.io/miklever/pen/PeOeLZ
Other comments
It looks that it's happened because of md icon display=inline-block property. Please see CSS in reproduction template attached.
layer 8 issue
mkpaz
All 3 comments
Remove class="d-block"
KaelWD
on 7 May 2018
Too simple to be truth :) I've added this class trying to fix described behavior and forgot to remove it. But I've found the reason: this is because I've imported material-design-icons-iconfont after Vuetify CSS styles. So Vuetify icon display property (inline-flex) was overridden by MD font property (inline-block). Sorry for inconvenience.
mkpaz
on 7 May 2018
👍8
vuetifyjs/vuetifyjs.com#353
KaelWD
on 7 May 2018
Was this page helpful?
0 / 5 - 0 ratings
Related issues
Webifi
路
3Comments
alterhu2020
路
3Comments
dohomi
路
3Comments
ricardovanlaarhoven
路
3Comments
cawa-93
路
3Comments
Most helpful comment
Too simple to be truth :) I've added this class trying to fix described behavior and forgot to remove it. But I've found the reason: this is because I've imported
material-design-icons-iconfontafter Vuetify CSS styles. So Vuetify icon display property (inline-flex) was overridden by MD font property (inline-block). Sorry for inconvenience.