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.
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.
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.
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?
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.
Check!
I’d appreciate further help. Thanks.