# Floating Form Button

**URL:** <https://community.glideapps.com/t/floating-form-button/16623>\
**Category:** Feature Requests\
**Created:** [October 1, 2020, 5:48pm UTC](https://community.glideapps.com/t/floating-form-button/16623 "2020-10-01T17:48:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 1, 2020, 5:48pm UTC](https://community.glideapps.com/t/floating-form-button/16623/1 "2020-10-01T17:48:36Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/7/743919ad22529c4e85f866210eab241ce65c6f25.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/f/f8166fda2ac71ce923710a503819b09d249d8a82.png)

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/d/d1a7aef2624006bebde552fca32e828f112b772b.png)

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

```auto
<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.

> **[Feature Requests](https://features.staging.glideapp.io/dl/ewAiAHQAIgA6ADAALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0ARgBlAGEAdAB1AHIAZQBzACIALAAiAHIAIgA6ACIARABLAHIAagBOAC0AMABXAFIAcgBhAC0AcAAyADMAagBkADgAQQBHAFoAZwAiACwAIgBuACIAOgAiAEYAQQBCACAAQgB1AHQAdABvAG4AIAAoAEYAbABvAGEAdABpAG4AZwAgAEEAYwB0AGkAbwBuACAAQgB1AHQAdABvAG4AKQAiAH0A)**
>
> Feature requests for Glide Apps

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [October 1, 2020, 5:51pm UTC](https://community.glideapps.com/t/floating-form-button/16623/2 "2020-10-01T17:51:23Z")

</div>

So timely @Jeff_Hager. I’m gonna use this right now! Thank you so much! 🙌🏻

---

<div class="post-metadata">

**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\
**Post date:** [October 1, 2020, 5:53pm UTC](https://community.glideapps.com/t/floating-form-button/16623/3 "2020-10-01T17:53:01Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 1, 2020, 5:57pm UTC](https://community.glideapps.com/t/floating-form-button/16623/4 "2020-10-01T17:57:15Z")

</div>

Found an existing request and added the link above.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 1, 2020, 6:11pm UTC](https://community.glideapps.com/t/floating-form-button/16623/5 "2020-10-01T18:11:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\
**Post date:** [October 1, 2020, 6:14pm UTC](https://community.glideapps.com/t/floating-form-button/16623/6 "2020-10-01T18:14:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 1, 2020, 7:44pm UTC](https://community.glideapps.com/t/floating-form-button/16623/7 "2020-10-01T19:44:33Z")

</div>

Absolutely beautiful. Adding this to my respository!

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [October 1, 2020, 8:09pm UTC](https://community.glideapps.com/t/floating-form-button/16623/8 "2020-10-01T20:09:31Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/b/b54aeb9486cb4f79056ebccdafb0a7506add6fd7.png)

Saludos Jeff

---

<div class="post-metadata">

**Author:** ![spencerb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/spencerb/32/4486_2.png) [@spencerb](https://community.glideapps.com/u/spencerb)\
**Post date:** [October 2, 2020, 12:55am UTC](https://community.glideapps.com/t/floating-form-button/16623/9 "2020-10-02T00:55:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 2, 2020, 1:04am UTC](https://community.glideapps.com/t/floating-form-button/16623/10 "2020-10-02T01:04:22Z")

</div>

In a rich text component.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 2, 2020, 2:21am UTC](https://community.glideapps.com/t/floating-form-button/16623/11 "2020-10-02T02:21:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 2, 2020, 2:29am UTC](https://community.glideapps.com/t/floating-form-button/16623/12 "2020-10-02T02:29:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 2, 2020, 2:34am UTC](https://community.glideapps.com/t/floating-form-button/16623/13 "2020-10-02T02:34:54Z")

</div>

@Jeff_Hager let me pay a coffee for that  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/e/ef1d8fda83dd363e0842a647fdab0459a7bca0e3.png)

---

<div class="post-metadata">

**Author:** ![spencerb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/spencerb/32/4486_2.png) [@spencerb](https://community.glideapps.com/u/spencerb)\
**Post date:** [October 2, 2020, 2:32pm UTC](https://community.glideapps.com/t/floating-form-button/16623/14 "2020-10-02T14:32:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 2, 2020, 2:37pm UTC](https://community.glideapps.com/t/floating-form-button/16623/15 "2020-10-02T14:37:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 2:50pm UTC](https://community.glideapps.com/t/floating-form-button/16623/16 "2020-10-02T14:50:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 2, 2020, 2:52pm UTC](https://community.glideapps.com/t/floating-form-button/16623/17 "2020-10-02T14:52:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 2:56pm UTC](https://community.glideapps.com/t/floating-form-button/16623/18 "2020-10-02T14:56:56Z")

</div>

A form button.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/3/3fa56aa3aad5e8b1ab6b6a715112a1cac73a3aea.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/1279a346e3d95a45325c7805581ddf244ed75d2b.jpeg)

Here’s a link to the app: [https://snowy-field-0962.glideapp.io/](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.

---

<div class="post-metadata">

**Author:** ![darder](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darder/32/12788_2.png) [@darder](https://community.glideapps.com/u/darder)\
**Post date:** [October 2, 2020, 3:59pm UTC](https://community.glideapps.com/t/floating-form-button/16623/19 "2020-10-02T15:59:54Z")

</div>

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:

> [@Jeff\_Hager](#):
>
> [features.staging.glideapp.io](https://features.staging.glideapp.io/dl/ewAiAHQAIgA6ADAALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0ARgBlAGEAdAB1AHIAZQBzACIALAAiAHIAIgA6ACIARABLAHIAagBOAC0AMABXAFIAcgBhAC0AcAAyADMAagBkADgAQQBHAFoAZwAiACwAIgBuACIAOgAiAEYAQQBCACAAQgB1AHQAdABvAG4AIAAoAEYAbABvAGEAdABpAG4AZwAgAEEAYwB0AGkAbwBuACAAQgB1AHQAdABvAG4AKQAiAH0A)
> 
> ### [Feature Requests](https://features.staging.glideapp.io/dl/ewAiAHQAIgA6ADAALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0ARgBlAGEAdAB1AHIAZQBzACIALAAiAHIAIgA6ACIARABLAHIAagBOAC0AMABXAFIAcgBhAC0AcAAyADMAagBkADgAQQBHAFoAZwAiACwAIgBuACIAOgAiAEYAQQBCACAAQgB1AHQAdABvAG4AIAAoAEYAbABvAGEAdABpAG4AZwAgAEEAYwB0AGkAbwBuACAAQgB1AHQAdABvAG4AKQAiAH0A)
> 
> Feature requests for Glide Apps

And vote there… ‼

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 2, 2020, 4:13pm UTC](https://community.glideapps.com/t/floating-form-button/16623/20 "2020-10-02T16:13:16Z")

</div>

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.

[Next page](https://community.glideapps.com/t/floating-form-button/16623.md?page=2)