How to make side-by-side floating buttons

Ask for Help
1

I’m trying to use multiple floating buttons that sit side-by-side toward the bottom of the screen so that my users can choose from multiple options when viewing profile cards. Any advice on building that out? @MegannLock

2

use CSS images, not buttons…

1 Like
3

make your own buttons… copy and paste this code into the rich text component… you will get a nice go-back button…
adjust position and with to your own needs… change image URL… add a custom action to that rich text component… that’s all…

<div style="
position: fixed;
bottom: 6vh; 
right :0.5%; 
width:8%;
z-index:1;
" target="_blank">
<img class="back_image3" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/u19DNGizzna5AzRcPZbM/pub/OZv3CI60Em1RKyayl5PC.png">

and if you put this code in a template… you can have these parameters as variables… that will make your buttons more cool :wink:

1 Like
4

If you want to stick to standard Glide features, you can add multiple button components, set them as floating, and they will display on top of one another (instead of side by side).

2 Likes
5

You can adjust the position of floating buttons with CSS.

Example:

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

…results in:

Screen Shot 2022-08-20 at 7.11.22 PM

You can use right, left, top & bottom to move them around as you like.
And if you have multiple buttons, you should address them individually using nth-child()

1 Like
6

Where do you add the code?

7

In a Rich Text component.

8

so something like this:


  .fab-target >:nth-child(1) {
  position: fixed;
  right: 25% !important;
}


  .fab-target >:nth-child(2) {
  position: fixed;
  right: 25% !important;
}


  .fab-target >:nth-child(3) {
  position: fixed;
  right: 25% !important;
}
9

That would result in all 3 buttons floating in exactly the same position, 25% from the right margin. So you would only see one button.

Experiment with it a bit and you’ll soon work out what you need for your use case.

10

Screen Shot 2022-08-23 at 6.11.07 PM
Screen Shot 2022-08-23 at 6.11.07 PM704×344 173 KB

I’m getting this despite the following css:


  .fab-target >:nth-child(1) {
  position: fixed;
  right: 25% !important;
}


  .fab-target >:nth-child(2) {
  position: fixed;
  right: 50% !important;
}


  .fab-target >:nth-child(3) {
  position: fixed;
  right: 75% !important;
}

Any advice? I'm trying to get the buttons to be centered at the bottom.
1 Like
11

nvm - figured it out. I had to add them to separate rich text components. Also, another heads up for anyone else doing the same thing, if you want to adjust the position either top, bottom, left, or right, you will need to create separate components for that as well.