# Comment bar position shifting issue

**URL:** <https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800>\
**Category:** Ask for Help\
**Created:** [November 10, 2022, 3:36pm UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800 "2022-11-10T15:36:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shilpi\_Sarkar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shilpi_sarkar/32/36080_2.png) [@Shilpi\_Sarkar](https://community.glideapps.com/u/Shilpi_Sarkar)\
**Post date:** [November 10, 2022, 3:36pm UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/1 "2022-11-10T15:36:48Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2d2fd821498582b94b4fd14a3bcd716a66990a3f.jpeg)

Everytime when a comment is added, the comment now button moves downwards which is undesirable. Can anybody please let me know the step by step procedure for applying the CSS file that Petitto has provided here to keep the comments bar fixed?

([Keep “Add Comment” button fixed on screen when scrolling - #6 by Robert\_Petitto](https://community.glideapps.com/t/keep-add-comment-button-fixed-on-screen-when-scrolling/17265/6))

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 10, 2022, 4:05pm UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/2 "2022-11-10T16:05:00Z")

</div>

add a rich text component… switch to custom text… paste this code:

```auto
<pre><span><style>
div[id*='screenScrollView'] > div >:nth-of-type(1) {
position: fixed;
bottom: 0;
margin-bottom: 80px;
background: white;
width:100%;
box-shadow: 0px 0px 19px 5px rgba(199,197,199,1);
padding: 10px;
}

```

replace the type number with the position of your component.

---

<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:** [November 10, 2022, 4:32pm UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/3 "2022-11-10T16:32:14Z")

</div>

This is the CSS I use for making “Comment chats”

 ![Group Chat](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/b/eb761753bcb15d12ff3c0900bfa6c6c6a1c88a7f.jpeg)

```auto

[data-test="app-comments-preview"] {
display:flex;
flex-direction: column-reverse;
}

[data-test="app-comments-preview"] >:last-child {
padding: 0px 16px 16px 16px;
}

[data-test="app-comments-preview"] >:first-child{
display: none;
}

[aria-label="Add comment…"] > :nth-child(2) {
border:0px solid;
color: #aaa;
border-radius: 5px !important;
background: rgb(246, 246, 246);
padding: 10px 5px !important;
text-align: left;
width: 100%;
font-size: 0;
}

[aria-label="Add comment…"] > :nth-child(2):before {
border:0px solid;
color: #aaa;
border-radius: 5px !important;
background: rgb(246, 246, 246);
padding: 10px 2px !important;
text-align: left;
content: "Write a message..." !important;
visibility: visible !important;
font-size: 14px;
}

```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 10, 2022, 4:59pm UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/4 "2022-11-10T16:59:25Z")

</div>

I fixed a little 😉 @Robert_Petitto

```auto
<pre><style>

[data-test="app-comments-preview"] {
display:flex;
flex-direction: column-reverse;
}

[data-test="app-comments-preview"] >:last-child {
padding: 0px 16px 30px 4px;
}

[data-test="app-comments-preview"] >:first-child{
display: block;
color:grey;
font-size:11px;
}

[aria-label="Add comment…"] > :nth-child(2) {
box-shadow: 1px 1px 9px;
padding: 5px 15px;
}

[aria-label="Add comment…"] > :nth-child(1) {
display: none !important;
}

```

 ![add comment css](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/f/3f384c1d030ea6a766ef5816b3fbbbad59f99c2e.png)

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/dl/da19fa/s/04a872/r/rEanGOzcRvuBgrG65TSQiQ)**
>
> share cool CSS, scripts and links

---

<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:** [November 10, 2022, 5:03pm UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/5 "2022-11-10T17:03:19Z")

</div>

Taking a look!

---

<div class="post-metadata">

**Author:** ![Shilpi\_Sarkar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shilpi_sarkar/32/36080_2.png) [@Shilpi\_Sarkar](https://community.glideapps.com/u/Shilpi_Sarkar)\
**Post date:** [November 11, 2022, 1:51am UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/6 "2022-11-11T01:51:03Z")

</div>

Could you please explain what you meant by “Replace the type number with the position” ?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 11, 2022, 1:55am UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/7 "2022-11-11T01:55:07Z")

</div>

in the code, you can notice type(x)… replace x with the position of your element in the glide editor… count from the top… be aware if the other elements are set to be visible… so the safest way is our second code that calls specific element regardless of position… but it will change all elements of this kind… unless you specify child… CSS is tricky, you must be aware of many surrounding conditions… also the type of device, OS, and browser

---

<div class="post-metadata">

**Author:** ![Shilpi\_Sarkar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shilpi_sarkar/32/36080_2.png) [@Shilpi\_Sarkar](https://community.glideapps.com/u/Shilpi_Sarkar)\
**Post date:** [November 11, 2022, 2:47am UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/8 "2022-11-11T02:47:38Z")

</div>

Thank you very very much Uzo

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [November 12, 2022, 2:47am UTC](https://community.glideapps.com/t/comment-bar-position-shifting-issue/53800/9 "2022-11-12T02:47:38Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.