0

Sorry, I couldn't think of a better title, I don't understand how to phrase this problem. I'm working with Bubble (no-code platform) and using CSS to resize my repeating groups for vertical responsivity. I've posted this question on Bubble forums, but am coming to Stack because the issue, I think, can be resolved using CSS. Appreciate any help.

The code that works is this:

<style>
#list {
height: calc(100vh - 175px) !important;
min-height: 468px !important;
overflow-y: scroll !important;
}

</style>

The problem I'm having is that the page layout seems to factor in the entire group's data regardless of how much of the group is visible. So, for example, say I have 20 items in the list and the list is 900px long. But, the viewport is only 600px, so the list is only visible up to 600px (and the remaining 300px can be scrolled through). The problem is the footer at the bottom of the page gets pushed down to 900px because it is acting as if the entire 900px group is visible, even though it's not. This means that there is a 300px white space between the bottom of the group and the footer. The footer should be at 600px.

Here is a video of the problem: https://gifyu.com/image/fdOT

As you see, Notes does not push the footer because it only has 3 items, but when the Person list is brought into the viewport it pushes the footer since it has more items even though they are hidden.

Is there some CSS that, say, ignores or hides to the layout the data that's not visible?

Nate Hutch
  • 1
  • 2

1 Answers1

0

The problem is you're not setting the width for the list, so it will expand to fit the contain even when you set the scroll, to fix this, you can just set width: 100vw for the list. Now the list will use 100vw, if the data more than that it will scroll, the footer will remain 100vw also.

Co Pham
  • 351
  • 2
  • 8
  • Thank you for your reply, unfortunately it didn't work. Here is a video of what is happening: https://gifyu.com/image/fdOT The Note list only contains 3 items so its fine. But as you see when I go to the Person list the footer gets pushed because it contains more items. the line I added is this: width: 100vw !important; (I've tested this works by playing with the value) – Nate Hutch Mar 21 '21 at 19:47
  • Oh, I see. Try set the height for the footer, also set position fixed. To be sure, can you post the css of the footer. – Co Pham Mar 22 '21 at 12:21
  • The footer has no CSS by default as it is Bubble (no code) and I can just drag and drop it. But, I tried adding CSS to fix its position. The problem is, even if I manage to fix the footers position, and the Group does not push the footer, it still stretches the background. So on mobile, there will be a massive white space below the footer that the user can scroll down to. The solution has to be to prevent the group from expanding "behind the scenes", but I can't find any CSS that would do that (it might just not be possible to override Bubble's algorithm) – Nate Hutch Mar 22 '21 at 17:39