Scrollable Group (made with CSS) Does not Contain RG's Height

I have a group that has a repeating group inside of it. I have used CSS to set the group’s height and made it scrollable using “overflow: auto !important”. This works, but with a catch. The parent groups, and other elements in the group, are still acting like the RG is outside of the scrollable group and are moving and resizing themselves accordingly.

Here is without any CSS, just a regular group with a RG in it:
withoutcss

With CSS:
withcss

Here is the CSS I’m using to make the group scrollable and set height:

#convopanel1 {
height: 500px !important;
overflow-y: auto !important;
}

I’ve cycled through adding just about every type of position and display property to both the group and the RG, but nothing seems to stop this behavior.

Any ideas?

Is your repeating group set to full list?

When I made my messaging template

It was really difficult to get everything to be completely responsive for any device. My repeating group is set to full list and I have CSS on the containing group to add scroll if the repeating group tries to stretch beyond the page height.

1 Like

Oh wow, I wish I had seen this template before I started down this road weeks ago haha. I have basically done the same thing, I’m just seeing some strange behavior with how bubble recognizes the height of the RG even though it is in a group “div” with “overflow: auto;” I was able to work around it by making the send message text box and area a separate floating group rather than a part of the main group.

Just bought your template and playing around with it. Where is your css for the messages html? For example class “from-me”.

Thanks for your purchase and for reaching out for more info.

When I built the messenger systems, I first built an inbox page and later decided it was necessary to have a separate mobile page, so I didn’t really optimize about where this HTML is, since it is present on both pages.

If you are not familiar with the App Search Tool, I’m happy to introduce it to you, as once I finally found out about it, it made so many things easier to do.

If you go to the search icon in the top right of the application and then select search by element type and choose HTML and search the entire app you will see all the HTML elements that are used in the application.

Screen Shot 2021-01-31 at 4.35.49 PM

The HTML element you are probably looking for is the HTML Speech bubbles which is where you would make the adjustments to color etc.

The HTML ‘from-me’ is actually the element used to display the message.

Don’t hesitate to reach out if you have any other questions or concerns.

Cheers

1 Like

Nice! Sounds good, I will. This has already helped me immensely.

Glad it has helped.

Let me know if you get stuck on anything else.

Cheers