Fixed-Height Repeating Group Expanding

Need help Responsiveness
1

I had a Repeating Group that was set to 100% of the group (which was full-height of the user’s screen). This worked perfectly fine, and seemingly a week or two ago, all of the data is now expanding well beyond the 100% full-height boundaries and showing the full list.

Before, the behavior was that the Repeating Group would display all of the entries, but the page didn’t scroll and the user could just vertically scroll through the Repeating Group. Think Slack and how you can scroll through channel messages and not through the entire app.

Anyone else have similar behavior recently happen? Thinking of submitting a bug report.

2

If I set it to 100% fixed-height, it expands beyond the threshold. If I set to 800px fixed-height, it stays within those boundaries, so I’m not sure what is pulling it out of the 100%…

3

Here is a Loom explaining it since I still haven’t been able to solve!

4

Yea looks like it’s pulling the 100% value as “the entire pages height” or something instead of the viewport like you’re looking for?

When I want things to fill the viewport I just add an HTML element from the Toolbox plugin, and put this in:

<style>
.contents {
    height: calc(100vh) !important;
   overflow-y: scroll !important;
    }

Then I just add {addClass: "contents"} to the ID attribute of the container. Then in your repeating group you can just let it expand the fill the entire container and check the box to “Allow vertical scrolling when content overflows”

2 Likes
5

@tyler11 This did the trick! Thanks!

Unfortunately, looks like the 100% height on the new engine has just…stopped working across my entire app. So many places now where it’s just not recognized. Wonder what happened…

6

Very strange that it happened randomly, I remember I tried doing the 100% viewport months ago and it never worked as I wanted so I moved on to the HTML method right away. I just put that HTML element in a reusable header that I use on everypage and I just keep putting the {addClass: "contents"} on everything I need.

7

For anyone else reading this… the post says:

add an HTML element from the Toolbox plugin

But what I found worked:

(1) Using Classify plugin (not Toolbox) - this is plugin that uses the “addClass:” syntax
(2) Using the standard HTML element to add the CSS style code
(3) Closing the CSS code with a closing tag

Bonus: if you have something above the RG (for example a header) you’ll want the height of the RG container to be the vertical height of the viewport, less the space above it. In my case, my header is 80px so I changed the CSS to:

height: calc(100vh - 80px) !important;

1 Like