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

<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 14, 2020, 8:44pm UTC](https://community.glideapps.com/t/floating-form-button/16623/41 "2020-10-14T20:44:19Z")

</div>

Hey, just Jeff’s original code span/ style section on top and bellow

---

<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 15, 2020, 8:15am UTC](https://community.glideapps.com/t/floating-form-button/16623/42 "2020-10-15T08:15:54Z")

</div>

Below buy inside the span/style section right?

---

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

</div>

Here’s my code for that.

```
<pre><span><style>
.dCBDKZ.dCBDKZ {
background-color: #2D8CFF;
}
.eUaQmi.eUaQmi {
background-color: #2D8CFF;
}
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 5px;
}
.gbJqOE {
display: block;
}
.jdxAWE {
display: block;
}
.dEHvyM {
display: block;
}
</style></span></pre>
```

---

<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 15, 2020, 2:04pm UTC](https://community.glideapps.com/t/floating-form-button/16623/44 "2020-10-15T14:04:10Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> .dCBDKZ.dCBDKZ {
> background-color: #2D8CFF;
> }
> .eUaQmi.eUaQmi {
> background-color: #2D8CFF;
> }
> .ekttti {
> width: 50%;
> float: left;
> }
> [data-test="app-button-view"] {
> margin: 5px;
> }
> .gbJqOE {
> display: block;
> }
> .jdxAWE {
> display: block;
> }
> .dEHvyM {
> display: block;
> }
> </style></span></pre>
> 
> ```

not working. when the butons are on the bottom the menu icons cover it:

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

wehn moving the buttons to the top I can see them ok but in both cases the buttons are not clickable

---

<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 15, 2020, 2:48pm UTC](https://community.glideapps.com/t/floating-form-button/16623/45 "2020-10-15T14:48:26Z")

</div>

@yinon_raviv,

Make sure both the button and the code are the last component on your component list.

That should help.

---

<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 15, 2020, 3:38pm UTC](https://community.glideapps.com/t/floating-form-button/16623/46 "2020-10-15T15:38:30Z")

</div>

I did and still didn’t work for me.

Any chance you send the full code that should be interested to the rich text?

---

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

</div>

It works fine for me in my app, probably your components have different class names to me, that’s my initial guess.

Or you can try Robert’s code here.

> [@Multirow Choice Component (aka Chips UI)](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/118):
>
> Try this: \<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\>

---

<div class="post-metadata">

### Author: ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)
#### Post date: [October 15, 2020, 4:20pm UTC](https://community.glideapps.com/t/floating-form-button/16623/48 "2020-10-15T16:20:32Z")

</div>

Can you send app link? @yinon_raviv

---

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

</div>

What do you mean by class name?

---

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

</div>

Which app, the testing I’m doing? Sure but how will this help? You won’t see the way it’s set up on the rich tezt

---

<div class="post-metadata">

### Author: ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)
#### Post date: [October 15, 2020, 4:50pm UTC](https://community.glideapps.com/t/floating-form-button/16623/51 "2020-10-15T16:50:27Z")

</div>

I need for app link because with Google Chrome ispection I can see your button class name @yinon_raviv

---

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

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> .dCBDKZ.dCBDKZ {
> background-color: #2D8CFF;
> }
> .eUaQmi.eUaQmi {
> background-color: #2D8CFF;
> }
> .ekttti {
> width: 50%;
> float: left;
> }
> [data-test="app-button-view"] {
> margin: 5px;
> }
> .gbJqOE {
> display: block;
> }
> .jdxAWE {
> display: block;
> }
> .dEHvyM {
> display: block;
> }
> </style></span></pre>
> 
> ```

> **[TESTING - Real estate app - multi filter](https://same-moon-7479.glideapp.io/)**

howo do you do this?

---

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

</div>

Np the buttons look like this and not one next to the other. but are clickable

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

---

<div class="post-metadata">

### Author: ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)
#### Post date: [October 15, 2020, 5:08pm UTC](https://community.glideapps.com/t/floating-form-button/16623/54 "2020-10-15T17:08:45Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> .dCBDKZ.dCBDKZ {
> background-color: #2D8CFF;
> }
> .eUaQmi.eUaQmi {
> background-color: #2D8CFF;
> }
> .ekttti {
> width: 50%;
> float: left;
> }
> [data-test="app-button-view"] {
> margin: 5px;
> }
> .gbJqOE {
> display: block;
> }
> .jdxAWE {
> display: block;
> }
> .dEHvyM {
> display: block;
> }
> </style></span></pre>
> 
> ```

```
    <pre><span><style>
.jZAwqG.jZAwqG {
background-color: #2D8CFF;
}
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 5px;
}
.gbJqOE {
display: block;
}
.jdxAWE {
display: block;
}
.dEHvyM {
display: block;
}
</style></span></pre>

```

your class name is **.jZAwqG.jZAwqG** , try the code I put there

---

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

</div>

> [@Antonino\_Nolasco](#):
>
> ```auto
> .jZAwqG.jZAwqG {
> background-color: #2D8CFF;
> }
> .ekttti {
> width: 50%;
> float: left;
> }
> [data-test="app-button-view"] {
> margin: 5px;
> }
> .gbJqOE {
> display: block;
> }
> .jdxAWE {
> display: block;
> }
> .dEHvyM {
> display: block;
> }
> 
> ```

same result. only the buttons color changed now

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/c/cac39f2161315f390e9194264be9001abdf37ca3.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 15, 2020, 5:15pm UTC](https://community.glideapps.com/t/floating-form-button/16623/56 "2020-10-15T17:15:14Z")

</div>

not working. this is what happen when i use Robert’s code

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

---

<div class="post-metadata">

### Author: ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)
#### Post date: [October 15, 2020, 5:16pm UTC](https://community.glideapps.com/t/floating-form-button/16623/57 "2020-10-15T17:16:01Z")

</div>

But it doesn’t work from editor, if you try the app it works @yinon_raviv

---

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

</div>

that’s on the app on Chrom on desktop

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

and that’s on the phone

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/10b19bf3d596a66f27942a2d4f402b722e23d97c.jpeg)

---

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

</div>

hey @yinon_raviv,

Try this code

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

```

@Robert_Petitto help me out with it and worked well for both IOS and Android.

---

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

</div>

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

thanks for the help but still no luck here

desktop:

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

the phone still looks the same as before with one on top the other

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

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