Floating Form Button

Feature Requests
1

I’ve always been a fan of floating buttons that remain fixed in place when scrolling. I think a floating form button would be a great way to display a form button as a substitute to the Add button.

I haven’t done much with CSS but I found a sample online and played around a bit to come up with this. The position from the bottom varies a bit depending on which device I’m viewing from. Also, it hijacks every single button on the screen and overlays them on top of each other, so unless I’m missing something, I think only one button can be on the screen for this to work. I did also notice in one test that a map component or map inline list was displaying on top of the the floating form button, but if anybody has any ideas to improve the CSS, have at it.

Maybe glide could provide this as a built in feature someday.

image
image412×848 34.4 KB
image
image413×857 32.5 KB

One thing that’s kind of fun, is that you can also make it semi-transparent by adjusting the fill color on the button component.
image

Here’s the CSS that I’m using. (I don’t know if the box shadow really does anything).

<span><style>
.sc-fznNvL{position:fixed;
	         width:60px;
	         height:60px;
	         bottom:10%;
	         right:5%;
	         border-radius:50px;
	         text-align:center;
	         box-shadow: 2px 2px 3px #999;
             font-size:40px;
             font-weight: normal;}
</style></span>

Here’s an existing request for this.

22 Likes
2

So timely @Jeff_Hager. I’m gonna use this right now! Thank you so much! :raised_hands:t2:

6 Likes
3

@Jeff_Hager Can you please create an official request in the app and paste the deep link here so that we can vote for it?

3 Likes
4

Found an existing request and added the link above.

3 Likes
5

In addition to doing this on button components, this would be awesome for Add and Edit buttons as well.

3 Likes
6

Voted. Thanks for doing this @Jeff_Hager.

It will also help us eliminate the bottom tabs for larger screen when our users open our apps in browsers and not via Home Screen shortcuts.

2 Likes
7

Absolutely beautiful. Adding this to my respository!

1 Like
8

Right,
The big challenge will be to write a value to any column. Currently, this trick shows values or symbols unfortunatelly.

I use this kind of trick as a notification on the screen and works very well

image

Saludos Jeff

2 Likes
9

So, I didn’t know that you could do anything other than inline CSS in Glide. Where are you placing your CSS?

1 Like
10

In a rich text component.

1 Like
11

Yep, rich text at the bottom of the component list. I don’t think position really matters.

12

Oh, saw it only right now! Thanks @Jeff_Hager gonna test here

1 Like
13

@Jeff_Hager let me pay a coffee for that
image

4 Likes
14

Where are you then placing the reference in the HTML? I guess what I mean is, I’m used to creating CSS inside the <head> section or referencing the stylesheet elsewhere. So, when he has .sc-fznNvL in between the <style> tags, is he then referencing that in the HTML somewhere like this below?

<div class="sc-fznNvL">
Blah Blah Blah
</div>

Or am I missing something? Sorry for the questions, but just trying to better understand how he’s referencing this in Glide.

15

I think it automatically adapts to the right class and you don’t have to do anything else.

2 Likes
16

I did this but the button is not clickable. How do I make it clickable.

1 Like
17

What do you have for an action on the button component?

18

A form button.

image
image2388×1668 816 KB
image
image2388×1668 430 KB

Here’s a link to the app: https://snowy-field-0962.glideapp.io/
The two buttons I am trying to get floating are: one for chats y the other one to share a post through the in-app chat.

2 Likes
19

Hey

The oficial request in the app only have 7 votes and here I count 14 likes…

Let’s help Glide Team, install the oficial app:

And vote there… :bangbang:

3 Likes
20

I think it might be the inline list overlaying the button. If you get a total of 6 images, you might see the button under the list. You can try adding some extra components and scroll down so the button is not over (under) the list and see if that works. Or try a profile with no images, so there is an empty list.

I’m not sure how to resolve this yet.

1 Like