# Keep “Add Comment” button fixed on screen when scrolling

**URL:** <https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265>\
**Category:** Ask for Help\
**Created:** [October 17, 2020, 6:10pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265 "2020-10-17T18:10:31Z")\
**Posts on this page:** 19\
**Page:** 1

<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 17, 2020, 6:10pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/1 "2020-10-17T18:10:31Z")

</div>

I’m building a private chat right now.

However, I found a serious problem.

The more you chat, you have to scroll down to the very end of the page.

Don’t you think it’s inconvenient?

That’s why I want users to chat from the floating form button on the far right of the picture.

However, I can’t find App Comment on the destination.

Do you have any solution for me?

 ![Post Picture](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/0/0cd40f9040eabc5a209403e410606a9797bb2198.jpeg)

---

<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 17, 2020, 6:18pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/2 "2020-10-17T18:18:02Z")

</div>

I wonder if you can use CSS to set the comment input box as fixed so it will always be at the bottom of the screen as you scroll.

---

<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 17, 2020, 6:43pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/3 "2020-10-17T18:43:12Z")

</div>

Thanks Jeff, but I’m just starting out with glide and I don’t understand css at all. I’ve never coded before.

Could you share code for me?

---

<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 17, 2020, 7:04pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/4 "2020-10-17T19:04:07Z")

</div>

I’ll tinker with it later today and get back to you. I’m out at the moment

---

<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 17, 2020, 7:14pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/5 "2020-10-17T19:14:22Z")

</div>

Thank you so much!! You saved my life.

---

<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 17, 2020, 8:57pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/6 "2020-10-17T20:57:46Z")

</div>

Check this out!

```auto
<pre><span><style>
.hEyZqr {
position: fixed;
bottom: 0;
margin-bottom: 80px;
background: white;
width:100%;
box-shadow: 0px 0px 19px 5px rgba(199,197,199,1);
padding: 10px;
}

```

 ![2020-10-17 16.56.53](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/d/d94a50570094b452beaebea6fda58be2345e43af.gif)

---

<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 17, 2020, 9:27pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/7 "2020-10-17T21:27:25Z")

</div>

Thank you very much. I’ll check it now!

---

<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 17, 2020, 9:30pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/8 "2020-10-17T21:30:29Z")

</div>

I checked it and it worked perfectly. You helped me and I really helped. Sincerely thank.

---

<div class="post-metadata">

**Author:** ![J\_Tanner\_Combias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/j_tanner_combias/32/22996_2.png) [@J\_Tanner\_Combias](https://community.glideapps.com/u/J_Tanner_Combias)\
**Post date:** [April 17, 2021, 8:47pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/9 "2021-04-17T20:47:26Z")

</div>

Hi Robert, I tried to put this code in a Rich Text box right below my Text Entry… it isn’t working. I’m sure I’m missing something. Sorry, what am I missing here? Thanks so much.

---

<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:** [April 17, 2021, 10:23pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/10 "2021-04-17T22:23:40Z")

</div>

Bob was using an unstable class name there so it might not be the same in your app. Can you include a screenshot of what your current components are on that screen?

---

<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:** [April 17, 2021, 11:15pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/11 "2021-04-17T23:15:28Z")

</div>

Yeah that was before I learned about named classes. Could probably substitute the named class for the unnamed one.

---

<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:** [April 17, 2021, 11:42pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/13 "2021-04-17T23:42:49Z")

</div>

Firstly I would try without CSS. Can you try adding some separator components to push it all the way down and see if it sticks?

---

<div class="post-metadata">

**Author:** ![J\_Tanner\_Combias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/j_tanner_combias/32/22996_2.png) [@J\_Tanner\_Combias](https://community.glideapps.com/u/J_Tanner_Combias)\
**Post date:** [April 18, 2021, 12:24am UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/14 "2021-04-18T00:24:30Z")

</div>

That does not work, if you add messages the text entry will get pushed down.

---

<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:** [April 18, 2021, 12:54am UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/15 "2021-04-18T00:54:19Z")

</div>

Try this:

```auto
<pre><span><style>
[data-test="app-comments-preview"] >:nth-child(2) {
position: fixed;
bottom: 0;
margin-bottom: 0px;
width:100%;
box-shadow: 0px 10px 19px 1px;
padding: 10px;
}

```

---

<div class="post-metadata">

**Author:** ![J\_Tanner\_Combias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/j_tanner_combias/32/22996_2.png) [@J\_Tanner\_Combias](https://community.glideapps.com/u/J_Tanner_Combias)\
**Post date:** [April 18, 2021, 1:16am UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/16 "2021-04-18T01:16:37Z")

</div>

Thanks. I put that into a rich text box, correct. Above the text entry and floating button? That does not work…

---

<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:** [April 18, 2021, 1:17am UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/17 "2021-04-18T01:17:33Z")

</div>

Oh wait…you’re using a text box. This is for the comments component. One sec.

---

<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:** [April 18, 2021, 1:33am UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/18 "2021-04-18T01:33:15Z")

</div>

This is close, but it ends up behind the inline list…`z-index` doesn’t seem to bring it forward.

```auto
.tf-inner {
position: fixed !important;
bottom: 45px;
left: 0;
width:100%;
box-shadow: 0px 10px 19px 1px;
padding: 10px 20px !important;
z-index: 2 !important;
border-bottom: 0px !important;
}

```

---

<div class="post-metadata">

**Author:** ![J\_Tanner\_Combias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/j_tanner_combias/32/22996_2.png) [@J\_Tanner\_Combias](https://community.glideapps.com/u/J_Tanner_Combias)\
**Post date:** [April 18, 2021, 1:54am UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/19 "2021-04-18T01:54:47Z")

</div>

Thank you so much for trying!

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:52pm UTC](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/20 "2024-01-17T16:52:31Z")

</div>