fast-button elements on the same line with and without icons do not align #5414
Labels
bug
A bug
community:good-first-issue
Good issues for first time contributors
community:request
Issues specifically reported by a member of the community.
status:needs-investigation
Needs additional investigation
warning:stale
No recent activity within a reasonable amount of time
🐛 Bug Report
See the following screenshot of two FAST Buttons on the same line (one with icon and one without) and how they are offset from each other:
![image](https://user-images.githubusercontent.com/1588923/142709089-197bad98-f605-4b34-8175-614ac991bce0.png)
💻 Repro or Code Sample
Stackblitz: https://stackblitz.com/edit/fast-button-alignment?file=index.html
🤔 Expected Behavior
I expect the buttons to be aligned on the same line like the following workaround:
Note: See the added
style="vertical-align:middle;"
😯 Current Behavior
See above.
💁 Possible Solution
See workaround above.
🔦 Context
We style buttons based on fast-foundation and ran into a similar issue when using display: inline-flex like fast is doing and have included a
:host {vertical-align: middle; }
in our styles. I think it has to do with weirdness involving changing the display configuration of the inner<button>
but we did not find a clear root cause.🌍 Your Environment
The text was updated successfully, but these errors were encountered: