# Add Floating Buttons to Non-Detail views

**URL:** https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466
**Category:** Feature Requests
**Created:** [June 1, 2021, 12:31pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466 "2021-06-01T12:31:38Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)
#### Post date: [June 1, 2021, 12:31pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/1 "2021-06-01T12:31:38Z")

</div>

Currently it’s not possible to add any components to List views, which makes sense for the most part.

However I think it would be nice to allow for floating buttons which don’t t interfere with the layout.

I am aware they still function like on-page components so a new ‘list view floating button component’ would likely need to be built. Just a suggestion as there have been a few times I’ve wanted to perform actions from list view pages.

 ![Screenshot 2021-06-01 at 13.19.39](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13e7f942dfb8d39cd4334120675a65b1f2166795.png)

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [June 1, 2021, 12:35pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/2 "2021-06-01T12:35:49Z")

</div>

Try using Link to Screen, which will give you more customization.

---

<div class="post-metadata">

### Author: ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)
#### Post date: [June 1, 2021, 12:38pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/3 "2021-06-01T12:38:35Z")

</div>

I do tend to do this, but it is unavoidable when users click ‘See All’ on an inline list that is displaying partial data

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [June 1, 2021, 12:42pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/4 "2021-06-01T12:42:24Z")

</div>

Yeah, this could be useful.  
Personally, I rarely use a List Layout because of this constraint. Even if all I intend to display on the screen is an Inline List, I’ll start with a Details Layout and then add a List component - just in case…

However, there is at least one scenario where you don’t have that option, which is with a List Relation component. When you use that and click through, you land on a List Layout which can’t be changed. So it would be handy in that case to have the option to add a floating button.

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [June 1, 2021, 12:53pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/5 "2021-06-01T12:53:01Z")

</div>

Try this per @ThinhDinh

```auto
/*-- Hide See All -- */
<pre><span><style> [data-test="see-all"] { 
display: none; 
}

AND

/*-- Stand Alone See All --*/
<div class="see-all-custom">→ See all</div>
<pre><span><style>
.see-all-custom {
font-weight: 600;
font-size: 0.875rem;
line-height: 1.0625rem;
color: rgb(0, 0, 0);
position: relative;
float: right;
cursor: pointer;
}

OR 

/*-- Title + See All --*/
<div class="same-line-test">
<div class="title">TItle</div>
<class="see-all">See all</class></div>
<pre><span><style>
.same-line-test {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
color: #101010;
cursor: pointer;
}
.same-line-test .title {
position: relative;
float: left;
font-weight: 700;
font-size: 1.1rem;
line-height: 1.1875rem;
color: #101010;
font-family: Poppins, BlinkMacSystemFont, Roboto, sans-serif;
}

```

Use Action → Link to Screen.

The first code will just provide a “See All” link whereas the second code will mimic the “Original Title” + “See All” on normal Inline-Lists. Just depends on what you need.

---

<div class="post-metadata">

### Author: ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)
#### Post date: [June 1, 2021, 12:54pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/6 "2021-06-01T12:54:59Z")

</div>

Oh Joe you’re a star. This is ideal

Thank you @ThinhDinh

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [June 1, 2021, 12:58pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/7 "2021-06-01T12:58:29Z")

</div>

Yea I didn’t want my users to see the “Favorites” when they clicked “See All”, while also using the same styling as the prior screen. This appears to be the most ideal solution.

However, I still dislike when people use the Search Bar and it removes all the CSS lol.

---

<div class="post-metadata">

### Author: ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)
#### Post date: [June 1, 2021, 1:01pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/8 "2021-06-01T13:01:49Z")

</div>

> [@Joe\_Gabriele](#):
>
> However, I still dislike when people use the Search Bar and it removes all the CSS lol.

Is this universally applied to any or all tabs?

This may be the answer as to why my CSS stopped loading the other day. 🧐

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [June 1, 2021, 1:05pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/9 "2021-06-01T13:05:01Z")

</div>

Not sure, I just noticed when someone inserts text in the search bar, the results come back with no CSS applied. Once you delete the text in the search, the CSS is reapplied.

Basically, when you search, it goes to “List View + Inline List”, thus removing all other components, including Rich Text Boxes.

---

<div class="post-metadata">

### Author: ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)
#### Post date: [June 1, 2021, 1:06pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/10 "2021-06-01T13:06:12Z")

</div>

Interesting observation! I’ll keep this in mind. Thanks!

---

<div class="post-metadata">

### Author: ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)
#### Post date: [June 1, 2021, 1:06pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/11 "2021-06-01T13:06:31Z")

</div>

That makes sense, thanks for the heads up

---

<div class="post-metadata">

### Author: ![11117](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11117/32/7762_2.png) [@11117](https://community.glideapps.com/u/11117)
#### Post date: [January 12, 2022, 7:49am UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/12 "2022-01-12T07:49:43Z")

</div>

Hi . I need a floating button on List. It seems that it’s right place to ask.  
Can you provide more details : where i put “code” ? ,etc  
Thanks in advance

---

<div class="post-metadata">

### Author: ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [January 12, 2022, 9:05am UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/13 "2022-01-12T09:05:16Z")

</div>

In order to add a floating button it would have to be in a details view.

In a details view have you tried adding a button component and changing it’s style to floating?

If you are familiar with css and want something fixed higher up on the screen you could try this.

> [@Pull-to-refresh!](https://community.glideapps.com/t/pull-to-refresh/14059/35):
>
> \<pre\>\<span\>\<style\> .fab-target \>:nth-child(1) { position: fixed; top: 14% ; right: 2% }slight_smile

---

<div class="post-metadata">

### Author: ![namernesto](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@namernesto](https://community.glideapps.com/u/namernesto)
#### Post date: [September 4, 2022, 6:23pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/14 "2022-09-04T18:23:00Z")

</div>

Hi! Thanks for this. How do you know the name of the data-test or classes in glide ?

---

<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: [September 4, 2022, 9:26pm UTC](https://community.glideapps.com/t/add-floating-buttons-to-non-detail-views/27466/15 "2022-09-04T21:26:36Z")

</div>

If you inspect the page source within the browser, then you can usually figure out which classes belong to which components.