Material-components-web: Floating FAB has a wrong distance from screen

Created on 7 Jul 2017 · 11Comments · Source: material-components/material-components-web

Bugs

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 bottom and right properties to 1.5rem (24px) fixes the problem. Would you like a PR?

help wanted

Source

touficbatache

Most helpful comment

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.

Garbee on 11 Jul 2017

👍2

All 11 comments

What exactly makes the distance wrong? There is no set distance in the specification as far as I am aware.

Garbee on 7 Jul 2017

Right, there is no set distance in specification but take a look at it, doesn't it seem wrong to you? Because there is no specification for that, I took as an example "Inbox" on Desktop and it has a 1.5rem distance

touficbatache on 7 Jul 2017

Inbox is doing what they're supposed to. That is making the position for their application design. The Fab also doesn't need to be in the bottom corner at all. Hence why that is a demo and developers need to place it to best fit their designs.

Garbee on 7 Jul 2017

I know that. This issue will fix the demo so it _looks_ better. If you want to showcase something, you should showcase it in a good way. The showcase on Desktop doesn't look good and that's what I want to change

touficbatache on 7 Jul 2017

Let's say that a developer (not designer) doesn't have any idea on where to place the FAB, he'll take it from the demo page/catalog as a reference and add it to his app and it will look ugly. Do you get which point I am talking about?

touficbatache on 7 Jul 2017

Changing this to 1.5rem doesn't force the developer to use it, it just makes the page look better than the old bottom and left distance

touficbatache on 7 Jul 2017

I get where you want to go, but I'm also not seeing where the change is making it look any better. It's not interfering with any content.

I'd like a little more to push a change to a demo other than "it looks bad" when "looks bad" is opinionated and there is no spec guidance on how it should look. Because next up someone opens an issue saying 1.5rem (which is also a possibly bad value anyways since it then is scalable depending on the font size which generally isn't desired in positioning with MD) "looks bad" and it should be 34px hard. What should happen then? The response can't be, "Well, Inbox is 1.5rem so that's what we're doing" because Inbox isn't the specification.

Garbee on 7 Jul 2017

According to the Material Design Guidelines:

The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.

So 1.5rem (24px) is on spec. Feel free to send a PR out @touficbatache. I'm fine assuming most developers view our demo site from a Desktop sized screen...but you could also get fancy and change the position for mobile sized screen if you like.

lynnmercier on 10 Jul 2017

Okay I can do that. Before I make the PR, I just have a question, why do we not just create a class like _mdc-fab--fixed_ that makes the FAB fixed on the bottom right.

I understand that you want developers to place it wherever they want but they could just dismiss this class and copy the example code from the catalog and add it to their project so they have a custom spacing. @lynnjepsen

touficbatache on 11 Jul 2017

Garbee on 11 Jul 2017

👍2

@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 scss file.