Floating Chat Group to Stretch Vertically?

umiumansa · 2021-01-30T08:09:49.028Z

Hello Bubblers! I need some help here.

I have chat on the right hand side of my app. The structure is:

Floating Group: Chat
|_ 1.1 Reverse Repeating Group: Chat Messages
|__1.1.1 Group: Chat Message (inside RG Cell)
|___1.1.1.1 etc. (message content)
|_1.2 Group: Chat Message Input
|__1.2.1 Input: Input Message
|__1.2.2 Image: Submit Message

The Floating group is top and bottom aligned.

Now this looks all fine when working at my regular resolution / zoom level:

2021-01-30 (3)1920×1020 505 KB

But then when zooming out or running app on different resolution, while the floating group (item 1) seems to stretch vertically as expected, the content of the floating group however (item 1.1 and 1.2), seem to hang up there, creating an unwanted gap between the bottom of the chat message input (item 1.2) and the bottom of the floating group and app page.

2021-01-30 (5)1920×1020 533 KB

How do I get the elements inside the chat to stick to the bottom of the floating group? The expected behavior is:

When zooming out:

Floating Group Stretches to fill vertical space.
Item 1.1 and 1.2, Repeating Group and Chat Message Input Group align at the bottom of the parent floating group.
Reverse Repeating Group stretches upward to fill vertical space.

How can I achieve that? Please help.

(I asked this question in a set of other question a long while back but never got this solved so I’m trying again).

aj11 · 2021-01-30T11:55:07.859Z

I’m currently facing a similar issue, but I’m hoping (from looking at your design) that yours might be a little easier of a solve.

I’m assuming your RG is set to vertical scrolling, correct? If so, vertical scrolling is not responsive, which means it does not expand as the page expands. It is locked to the height you set it to previously. You could try adding the following css to the HTML Header section in the options of the page.

<style>
#idofRG {
height: 100vh !important; /* Force RG to height of floating group. Might need to be 90vh, just play with it*/
bottom: 100px !important; /*this is to account for your text input area. You will likely need to change this number. You might also need to try switching it to "top: 100px" as reversing your RG may make the top into the bottom.*/
}
</style>

In theory, this will force the RG to full height of the floating group, but then also move it 100px off the bottom of the floating group to leave space for your text input area.

I’m currently facing this in a text messaging context. The problem I ran into with this solution is that because I have so many items being shown and hidden in my RG (images, text, message info, etc) and the message lengths can be so different, no matter how many cells I did or didn’t add to the VS RG it would not load correctly. So basically I can’t use vertical scrolling, only full list, which causes other headaches I won’t scare you with lol.

If you can get the RG to dynamically change height based on VH then that will be the way to go for sure.

twilson9034 · 2021-01-30T12:25:40.334Z

I ran across this not to long ago. Maybe not exact same thing, but why the screen would change the input text box wouldn’t stay at the bottom.
What I tested was to make two separate floating groups, one for you chat feed and the other for your input, set the chat feed to float relative to top or both (I dont think it mattered) and the input FG to float relative to bottom.

Here’s what I did.

Your current FG should be Vertically relative to the Top, then create another FG just for your Input box group and have it float relative to bottom.

image1028×889 13.5 KB

image1029×899 14.1 KB

umiumansa · 2021-02-01T12:16:16.017Z

twilson9034:

I’m assuming your RG is set to vertical scrolling, correct?

Check!

Okay, let me try the HTML. That’s really exciting.

umiumansa · 2021-02-01T12:17:14.961Z

This is pretty smart! I’m going to try, and perhaps mix this with the other HTML proposal and get some super-solution!

umiumansa · 2021-02-01T13:04:49.637Z

Dear both @twilson9034 and @aj11 thanks a lot for your input and giving your time! Much appreciated.

After applying a combo of both your solutions, HTML + double floating groups, I ended up closer to my goal. Here’s the result:

Your Bubble app (6)

With the HTML, it’s now set as:

<style>
#rgTranscript {
height: 80vh !important; 
bottom: 100px !important; 
}
</style>

The height at 80vh sets the height from the bottom, which is what’s require to be above the input area. I thought this would not matter once the input group is no longer inside the floating group, but I was wrong. Somehow if this height value increases, it still results in the RG to flow below the input group, so it means it stretches the floating group?

I am not sure to understand what the bottom/top value does still, even after playing with the value.

Now as you can see, when I zoom out, the RG stretches, but somehow it’s still drifting away from the input. Isn’t the bottom value supposed to be taking care of that?

umiumansa · 2021-02-01T13:13:39.347Z

Okay well, I changed the HTML to:

<style>
#rgTranscript {
height: 100vh !important; 
top: -130px !important; 
}
</style>

And I am not sure to understand exactly why—but it works!

Your Bubble app (9)

Thanks a ton!

aj11 · 2021-02-01T21:23:37.471Z

Nice! Yeah that’s how it goes sometimes lol. If it works it works. Glad you found a solution!

umiumansa · 2021-02-02T02:21:37.804Z

Actually now I’m having a scrolling problem. When scrolling it does not load older messages (or they don’t show on the screen area).

aj11 · 2021-02-02T03:19:02.778Z

With my solution I had to switch to full list and then create a trigger in javascript that loaded more items as the user scrolled up. It’s not very pretty but it works for me as my users won’t be scrolling up to look at old messages too much. See if you can solve within just bubble first, but If not I can send you my code.

umiumansa · 2021-02-02T03:34:43.445Z

Let me give it a try and revert. Thanks for the help.

umiumansa · 2021-02-02T03:54:36.978Z

Notes: it’s weird, when I change the height to anything below 90, it will load more cells, but from 90 upward it won’t…

umiumansa · 2021-02-03T16:52:47.353Z

Couldn’t figure out a way I’d appreciate further help. Thanks.