# 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:** 5

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [October 17, 2020, 4:33pm UTC](https://community.glideapps.com/t/floating-form-button/16623/81 "2020-10-17T16:33:28Z")

</div>

@yinon_raviv You can try this code.

```
<pre><span><style>
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 10px;
}
.eEPsye div:nth-child(1), .eEPszt div:nth-child(1) {
display: block;
}
</style></span></pre> 

```

Make sure you put this rich component just above the buttons components. I am using this code and it is working in both OS.

---

<div class="post-metadata">

**Author:** ![George\_Lewis1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/george_lewis1/32/5517_2.png) [@George\_Lewis1](https://community.glideapps.com/u/George_Lewis1)\
**Post date:** [October 18, 2020, 12:12am UTC](https://community.glideapps.com/t/floating-form-button/16623/82 "2020-10-18T00:12:46Z")

</div>

Sorry, just increase the bottom position, say bottom:10%, or 50px, experiment until it looks good

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 18, 2020, 9:25am UTC](https://community.glideapps.com/t/floating-form-button/16623/83 "2020-10-18T09:25:10Z")

</div>

> [@Pratik\_Shah](#):
>
> ```auto
> <pre><span><style>
> .ekttti {
> width: 50%;
> float: left;
> }
> [data-test="app-button-view"] {
> margin: 10px;
> }
> .eEPsye div:nth-child(1), .eEPszt div:nth-child(1) {
> display: block;
> }
> </style></span></pre> 
> 
> ```

THANKSSSSS  
This one worked on both desktop and android nobile - kulululululiu

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [October 18, 2020, 9:32am UTC](https://community.glideapps.com/t/floating-form-button/16623/84 "2020-10-18T09:32:10Z")

</div>

@yinon_raviv you tell the community to give it up but the community continues and finds the solutions. It’s cool😎

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 18, 2020, 9:33am UTC](https://community.glideapps.com/t/floating-form-button/16623/85 "2020-10-18T09:33:26Z")

</div>

aboslutly. this is one of the best communities i’m in.

Pure pleasure and more important so rich with knowledge and desire to help.

---

<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 18, 2020, 9:42am UTC](https://community.glideapps.com/t/floating-form-button/16623/86 "2020-10-18T09:42:32Z")

</div>

Gonna send some screnshots later so you know where to debug if something happens.

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 18, 2020, 9:42am UTC](https://community.glideapps.com/t/floating-form-button/16623/87 "2020-10-18T09:42:54Z")

</div>

appreciate that brother

---

<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 18, 2020, 9:58am UTC](https://community.glideapps.com/t/floating-form-button/16623/88 "2020-10-18T09:58:28Z")

</div>

Here you are.

Each element in the screen of our app has their own class names, and it can vary app by app.

In this video below, I pointed out which part of the HTML code corresponds to which part in the app.

For example, .ekttti & data-test = “app-button-view” correspond to the button you use, I think it’s the same for all apps.

eEPsye & eEPzst is a bit more tricky, as it differs by operation system as you can see in the video, so I have to test on all OS before release.

If you know which element you’re acting on, you can customize your app a lot more. I usually edit straight on that inspect element screen before making changes in my rich text.

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [October 18, 2020, 12:05pm UTC](https://community.glideapps.com/t/floating-form-button/16623/89 "2020-10-18T12:05:39Z")

</div>

Glad it worked. This code was shared by @Robert_Petitto

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [October 20, 2020, 3:54pm UTC](https://community.glideapps.com/t/floating-form-button/16623/90 "2020-10-20T15:54:10Z")

</div>

This is a bit ridiculous! Why are we learning CSS and HTML to format a floating form button? Isn’t Glide a no-code tool? 😑

---

<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 20, 2020, 4:25pm UTC](https://community.glideapps.com/t/floating-form-button/16623/91 "2020-10-20T16:25:29Z")

</div>

Totally agree. Some of us are just never satisfied. 😉

Some of us always want more, and when new features are released, within minutes there are those people that ask for extra features on top of those new features without appreciating the fact that we just got something we never had before.

At least I’m hoping that this gives Glide the extra nudge to build some of this stuff natively.

For those that are familiar with CSS and HTML, I guess I don’t have a problem with them using it as they know the consequences. I’m more concerned about those that are plopping in this code with no knowledge of how it works or why they are doing it.

---

<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 20, 2020, 5:03pm UTC](https://community.glideapps.com/t/floating-form-button/16623/92 "2020-10-20T17:03:42Z")

</div>

> [@Jeff\_Hager](#):
>
> For those that are familiar with CSS and HTML, I guess I don’t have a problem with them using it as they know the consequences. I’m more concerned about those that are plopping in this code with no knowledge of how it works or why they are doing it.

Exactly this.

Sometimes I get requests from customers to build this or that and I can’t give them a timeframe to do that natively, so I use CSS when I can and also take note of it as a “future roadmap” to bring that back to Glide’s native way when they offer it.

---

<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 20, 2020, 5:17pm UTC](https://community.glideapps.com/t/floating-form-button/16623/93 "2020-10-20T17:17:20Z")

</div>

I just suggest to test inspection view in another browser tab, not inside glide editor

---

<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 20, 2020, 10:26pm UTC](https://community.glideapps.com/t/floating-form-button/16623/94 "2020-10-20T22:26:53Z")

</div>

Thank you. I actually only did that when something doesn’t work out on the phones 😂😂😂

---

<div class="post-metadata">

**Author:** ![11145](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11145/32/15195_2.png) [@11145](https://community.glideapps.com/u/11145)\
**Post date:** [October 22, 2020, 11:36pm UTC](https://community.glideapps.com/t/floating-form-button/16623/95 "2020-10-22T23:36:37Z")

</div>

I was checking the app and found that css for adding the floating form button wasn’t working. Is this a bug?

Is there anyone in the same situation!?

 ![スクリーンショット (177)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/5/58957729255756a804b460e1b56939e8e65aa349.png)

---

<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 22, 2020, 11:48pm UTC](https://community.glideapps.com/t/floating-form-button/16623/96 "2020-10-22T23:48:17Z")

</div>

Probably your class name is different, again.

---

<div class="post-metadata">

**Author:** ![11145](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11145/32/15195_2.png) [@11145](https://community.glideapps.com/u/11145)\
**Post date:** [October 22, 2020, 11:56pm UTC](https://community.glideapps.com/t/floating-form-button/16623/97 "2020-10-22T23:56:09Z")

</div>

It was exactly what you said!! I really appreciate it every time 🙏

 ![スクリーンショット (178)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/d/d1ac6c5a6b03a3575753342de7e51eb52563cb21.png)

---

<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 23, 2020, 12:56am UTC](https://community.glideapps.com/t/floating-form-button/16623/98 "2020-10-23T00:56:04Z")

</div>

Yeah, I think the latest update from Glide changed the class names. My buttons all stopped working. I had just finished doing stacked floating form buttons on one of my screens too. It’s like they know… 😉 Well, can’t say I was never warned. That’s the price you pay for doing something that’s not supported.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/f/fee596ff24c4774fa86dc6b111a1a7965a1b0d63.png)

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 23, 2020, 6:10am UTC](https://community.glideapps.com/t/floating-form-button/16623/99 "2020-10-23T06:10:29Z")

</div>

> [@Pratik\_Shah](#):
>
> ```auto
> <pre><span><style>
> .ekttti {
> width: 50%;
> float: left;
> }
> [data-test="app-button-view"] {
> margin: 10px;
> }
> .eEPsye div:nth-child(1), .eEPszt div:nth-child(1) {
> display: block;
> }
> </style></span></pre> 
> 
> ```

Crazy thing, it suddenly stopped working and the buttons are as they usually are one on top of the other 🤦🏼‍♂️

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 23, 2020, 6:12am UTC](https://community.glideapps.com/t/floating-form-button/16623/100 "2020-10-23T06:12:02Z")

</div>

thanks @ThinhDinh, will love it if next week we can do a quick zoom where you can shohow to do this as I use chrom on windows and can’t find what you’re showing,

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

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