Vuetify: [Bug Report] FAB Icons Lost Center Alignment Following #7abf1aa

Created on 8 Aug 2018 · 1Comment · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.1.10
Last working version: 1.1.9
Vue: 2.5.16
Browsers: Chrome 70.0.3508.0
OS: Mac OS 10.13.6

Steps to reproduce

See this and other FAB examples from the docs.

Expected Behavior

FAB icons to be centered within the button

Actual Behavior

Icons are at the bottom

Reproduction Link

https://codepen.io/anon/pen/pZQbbO

Other comments

Commit #7abf1aa removed height: inherit from button styling, which previously centered them.

bug

Source

hdimmig16

👍5

Most helpful comment

Working on this bug has led me to discover a quirk in CSS.
https://codepen.io/praveenpuglia/pen/jpXrKp

Buttons are special elements in which even if the button has display: flex it still creates a block formatting context instead of a flex one. To put it simply, it just ignores that display: flex.

More on this here - https://twitter.com/praveenpuglia/status/1027721484871979008

praveenpuglia on 10 Aug 2018

👍2

>All comments

Working on this bug has led me to discover a quirk in CSS.
https://codepen.io/praveenpuglia/pen/jpXrKp

Buttons are special elements in which even if the button has display: flex it still creates a block formatting context instead of a flex one. To put it simply, it just ignores that display: flex.

More on this here - https://twitter.com/praveenpuglia/status/1027721484871979008

praveenpuglia on 10 Aug 2018

👍2

Was this page helpful?

0 / 5 - 0 ratings