Replicate the old floating button

[Luiz_Roberto]

I really liked the floating button in the lower right corner of the old glide, does anyone know if it’s possible to replicate it using custom css? I’ve tried here but I can’t seem to make any progress…

[Himaladin]

Do you know how to expand and collapse the buttons you are going to create?

[Luiz_Roberto]

I use a custom collection to create an image feed like a social network. I would like the user on mobile to be able to add a photo without having to go up to the top of the page to find the button. With the floating button, they will be able to see all the photos and when they want to add, the button will be there.

[Himaladin]

So, do you only need 1 button, or more like the image below? That’s what I’m asking.

[Luiz_Roberto]

Just one button, but I would also like to know how to do it in this version of the gif, I found it wonderful and it may be useful in the future

[Himaladin]

I’ll give you the complete version (4 + 1 button for expand). I think you’ll understand how to create just one button from this. Remember, all of these buttons should be placed at the very bottom of the component order on your page.

1. Use a rich text component with a unique class name, except for the two open-close buttons (see image below), and include the following code:

<img src="URL" alt="Avatar" style="width: 55px; height: 55px; border-radius: 50%;">

2. For the open-close buttons, each should have a ‘set column value’ action to fill in a boolean value (usc column type) in your user table. For the other buttons, assign actions as needed and set visibility based on the boolean value from the user table.

3. In the custom CSS box, use the following code (adjust according to your class names):

The difference in the following code is the value of the “bottom” property to set the distance for each button.

#page-root .open-close {
position:sticky;
bottom:0px;
z-index:99999;
width: fit-content;
margin-left: auto;
margin-top: 0rem;
margin-bottom: 0rem;
}
#page-root .float-1 {
position:sticky;
bottom:120px;
z-index:99999;
width: fit-content;
margin-left: auto;
margin-top: 0rem;
margin-bottom: 0rem;
}
#page-root .float-2 {
position:sticky;
bottom:180px;
z-index:99999;
width: fit-content;
margin-left: auto;
margin-top: 0rem;
margin-bottom: 0rem;
}
#page-root .float-3 {
position:sticky;
bottom:240px;
z-index:99999;
width: fit-content;
margin-left: auto;
margin-top: 0rem;
margin-bottom: 0rem;
}

[Himaladin]

I will simplify the CSS code to make it shorter and avoid repeating properties.
Here, I have added the class name “floating,” which is appended to the existing class name specifically to handle the sticky functionality, while the bottom property is handled by sub-classes as before.

#page-root .floating {
position:sticky;
z-index:99999;
width: fit-content;
margin-left: auto;
margin-top: 0rem;
margin-bottom: 0rem;
}
#page-root .open-close {
bottom:0px;
}
#page-root .float-1 {
bottom:120px;
}
#page-root .float-2 {
bottom:180px;
}
#page-root .float-3 {
bottom:240px;
}

[Luiz_Roberto]

It worked great here, thank you very much, this css was brilliant

[RayLor]

I’m trying to accomplish this, but my buttons are not displayed on top of the other items.

[Himaladin]

Did you turn off “use compile css” and enable preview?
I have a hard time guessing where the error is without any data you can show.

[RayLor]

[https://www.loom.com/share/62989f38603643d381705f7a3e9e6f58](https://www.loom.com/share/62989f38603643d381705f7a3e9e6f58)

[Himaladin]

Every rich text component must contain the class name “floating.”
Please turn off the “use compiled CSS” button as follows:

[RayLor]

Thank you very much! Works like magic now! Just had one of the buttons on top of another, changed its bottom px distance and all good now! Thank you!