Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Floating FAB has a wrong distance from screen
See original GitHub issueBugs
What MDC-Web Version are you using?
0.14.0
What browser(s) is this bug affecting?
All desktop browsers (I’m using Chrome)
What OS are you using?
Windows 7
What are the steps to reproduce the bug?
- Go to http://material-components-web.appspot.com/fab.html
- Observe the floating, bottom-right, FAB
What is the expected behavior?
The FAB should be closer to the screen
What is the actual behavior?
The FAB has a wrong distance
Any other information you believe would be useful?
Setting the
bottomandrightproperties to1.5rem(24px) fixes the problem. Would you like a PR?
Issue Analytics
- State:
- Created 6 years ago
- Comments:11 (11 by maintainers)
Top Results From Across the Web
What is the distance between 2 or more Floating Action Button?
Looking at the Google developer documents on the FAB there is no definitive answer for spacing between FAB's but it states that.
Read more >Buttons: floating action button - Material Design
A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content,...
Read more >Floating action button moves up when used with keyboard input
This works but the fab gets pushed to the top of the screen and still visible. A work around I used was to...
Read more >Bambuser — Increase visibility with the Floating Action Button
You can embed this widget into all or selected pages on your website to get as many visits to a live show as...
Read more >Implement Floating Action Button - Part 2 - Suleiman's Blog
It covers how you can quickly setup a Floating Action Button. ... This is the distance the FAB is required to move off...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
We decided when the element was initially being drafted to not do any placement modifiers. As it depends on the UX of the projects at hand and once you make some positioning system you’re stuck supporting it. There is also the worry of being a defacto standard when it isn’t meant to be. The FAB should be meaningfully placed by a designer based on where it will have the most impact. Not simply fixed to the bottom right/left because that’s what the library builds in as an option out of the box.
@lynnjepsen @touficbatache I think lets take a step back and digest what @Garbee is saying. I think for the most part we all agree that these components need to stay as un-opinionated as possible with regards to placement within any given implementation.
If we do want to change the demo, we should do so in the demo’s style, and not apply anything directly to the FAB’s
scssfile.