Keep a CSS modified floating group anchored

I wanted to create a livechat using floating group. So I made this floating group anchored to the bottom of the page :

The issue is if the user screen height is too high, he can see the page in the background (see the blue bar in the screenshot)
So I used to CSS tool plugin with these settings to get the floating group cover all the page height.
But now the floating group keep the anchor to the top of the screen.

Does someone have an idea to keep the group anchored to the bottom despite the CSS edit?

Cheers :wink:

There’s no need to fiddle with any CSS for this mate, your overcomplicating your canvas > if you float your header to the top it stays ‘top’ > if you float your footer to the bottom it stays ‘bottom’ > and let your RG messages expand naturally (RG > full-list or horz ex). ***TIP remember to add both top and bottom buffers to your RG messages to allow margins.

I agree but the problem if I use your solution, when an user will type a message, the will see something like this, because the RG will not be anchored to the bottom with the input:

And I want him to see this, feels more native:

I think you’ve completing missed my last TIP.

In your RG > create a buffer above and below your cell content and set the following cond on each buffer:

top buffer … only visible when RG … :first-item
bottom buffer … only visible when RG … :left-item

***Remember to set each buffer the exact same size as your header and footers or even bigger to allow more margin/s.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.