Keep “Add Comment” button fixed on screen when scrolling

Ask for Help
1

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
Post Picture1797×1082 133 KB

2 Likes
2

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.

3

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?

4

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

2 Likes
5

Thank you so much!! You saved my life.

1 Like
6

Check this out!

<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
2020-10-17 16.56.53642×1208 2.08 MB

9 Likes
7

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

8

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

2 Likes
9

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.

10

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?

11

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

1 Like
13

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?

14

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

15

Try this:

<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;
}
2 Likes
16

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

17

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

18

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

.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;
}
19

Thank you so much for trying!