Anti-Full-Screen Comments?

I don’t know if it’s already been requested, but some of my users have asked about being able to see the content of a screen while posting a comment. Right now, Comments edit areas overlay the Glide content.

In my opinion, Comments areas should work more like the Messages app, where the screen content moves up, and you’re able to scroll the entire screen (past comments and the Glide content all at once) while you’re posting your comment at the very bottom. Possible? On the road map? Desirable by anyone else? Does this even make sense?

1 Like

We don’t like it either! It’s implemented this way due to a bug in iOS, but we have a fix now, we just need to build it.

6 Likes

Hiyo, I just wanted to check in to see if there has been any movement on enhancing Comments. It would be great to have Google sign-in available for Comments. Also, getting away from the full-screen overlay would be great, still. My wife was frustrated today when trying to comment in my app when she couldn’t scroll back to the top of a long post. She ended up losing the text and having to retype.

2 Likes

I agree. Can’t wait for the fix!

I just implemented comments in my app after our community overwhelmingly requested it. I’d been resisting adding it because frankly the comments on Glide have too many problems. For me, the biggest issue isn’t the fact that the message input covers the rest of the chat (although that one is pretty big). It’s that the commenting button is attached to and therefore scrollable with the comment list itself. This means when a user enters a message board, they have to scroll through potentially hundreds of comments to get to the bottom of the list where they can actually tap the button to add one themselves. I’m hoping there’s some CSS magic I can whip up to fix that button somewhere on the screen while the rest of it can still scroll… but I’m not hopeful.

If components like Inline List can activate a fixed search bar at the top of the screen why not a screen with a comment component fixing a text input at the bottom of the screen? Or one of those Chat style floating buttons.

And yeah, can’t react to a message. Can’t reply to an individual. Can’t even effectively tag them in a message. Can’t even tap on their avatar to go to a detail page of any kind. It’s the first day with this feature live in my app and the community is really excited and having fun. But I’m bracing myself for when the excitement wears off and worry the problems will become an issue for many. In fact, already searching for a third party chat/feed solution I can install on my site, style to match my glide app, and can be authenticated by a user by passing a token via URL parameter. Then I could use Webview. Again, not feeling hopeful.

Hola @John_Cabrera

Try that CSS, I believe it brings the comment button up to the beginning.


<pre><span><style>
[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;
}

Hello @SantiagoPerez Yes, I found this CSS yesterday, but thank you. I actually came up with a slightly better one that sticks the comment box to the top of the screen (similar to screens with the search bar) so you can comment at any point while you are scrolling without having to scroll back to the top. I will post the code here a little later today.

1 Like

If you have a screen with only a comment component on it (like perhaps it’s linked from a previous detail screen with a button that says “Comments”) place a Rich Text component above the Comment component and give it the following text:

<div style="height:75px;width:100%;background-color:white;position:fixed;z-index:10;margin-top:-30px"></div>

<pre><span><style>

[data-test="app-comments-preview"]>div {
position:fixed;
margin-top:-55px;
width:100%;
background-color:white;
z-index:20
}

[data-test="app-comments-preview"] {
margin-top:35px
}

[data-test="app-comment"] {
position:relative !important;
margin-top:0px !important;
z-index:1 !important;
}

</style></span></pre>

Switch the order from Newest to Oldest. This will give you a nice reverse order comment list (newest at the top) with a fixed comment button at the top of the screen and a white background that the comments can cleanly scroll under. This way you can comment at any point while scrolling. And you can jump back to the top of the list easily by just tapping the title of the screen.

Note: this does cover up the text that tells you how many comments the board currently has. Unfortunately that gets hidden under the white DIV background behind the comment box, since it’s affected by the first style in the list. Unlike some of the other elements in this comment component, that one can only be corrected by targeting its class. I try to avoid targeting classes in Glide CSS overrides because those do change regularly.

I’ve never needed that label with the number of comments. It’s nowhere near as important as the benefit I get from a fixed comment box.

1 Like

Of course, if you’re using a dark theme, you’ll need to change that background-color style for one that matches the background color of your app.

1 Like

Good morning @John_Cabrera , I am verifying that you can no longer download gif images, some problem arose or it is a new update, since before I could upload my gif now it does not allow me, I would appreciate a lot if you can solve it