Floating button position

Hi,

Could you make it possible to choose the floating button position, please? Right now it’s only available at the bottom right corner. It would be nice to have the option to move it’s possition to top right corner for example.

I’m requesting this because right now I have a floating form button and a map list. So when I click on a pin in the map it displays the info of that item (with some text and image) in the bottom part of the screen and the floating button covers the small image there and it’s completelly unvisible.

Is it possible to have the floating button be on top right corner of the screen. Or to have an option to stick on top the regular button component?

Thank you!

This is possible with CSS…

<pre><span><style>
.fab-target >:nth-child(1) {
position: fixed;
top: 10% !important;
right: 5% !important;
}
.fab-target >:nth-child(2) {
position: fixed;
top: 20% !important;
right: 5% !important;
}

Use the above in a Rich Text component, and adjust the values to suit.
nth-child(1) will refer to the first floating button, nth-child(2) to the second, etc.

2 Likes

Thank you so much!
I’ll do that :slight_smile:

For languages that are right-to-left oriented, do these types of UI features get set to the left in web/app design practice? Do people hold their phone with their left hand?

I’m a lefty, but I have to hold my phone with my right because of the left-to-right design orientation with my native English. My thumb doesn’t even reach the left hand side of my huge LG screen. :sweat_smile: