Setting a group to be % of viewport height dynamically

For getting a RG to stretch to the bottom as long as there is enough data retrieved to do so and then to restrict it from expanding beyond, I put the RG into a Group. I set up the Group to have a max height equal to 100VH and put the scroll to ‘auto’ and if I don’t want the scrollbar visible, I make adjustments to its styling.

The RG is set to full list (usually I restrict it with :items until operator and add pagination, but that might not be what you are looking for). When it is full list and the Group is set to max width with scroll on auto, if the full list goes beyond the max height setting the scroll bar kicks in and allows the RG to be scrolled.

I typically put the scroll bar onto the container Group.

BTW, what is an RP?

1 Like

Hey @brian1, a link to the editor or version-test preview?

Hey @brian1 thanks for jumping in and helping me out.

Regarding #2, I’m not using external scroll. I change it in favor of a vertical scroll. (not sure if the full list would be better suited for this use case, but having clients with 2.5k+ contacts in their DB could take a few extra seconds to load unless I add Algolia for the indexing).

I kinda lost you on #1. The logic makes perfect sense to me, but running the javascript is just for retrieving the object?

I tried to run the javascript but it threw me an error. I checked the console:

What I’m trying to achieve is:
1 - Page 100vh; 100vw :white_check_mark:
2 - Reusable element adapts to the viewport correspondently to #1 :thinking:
3 - Make the Repeating Group inside the reusable element scroll in and load more database entries :x:

Hey @boston85719, thanks for the insight.

That’s exactly what I’m trying to achieve with the RG.
When you say:

set up the Group to have a max height equal to 100VH

I could do to it by adding a class to the group with classify, and insert in the html:
<style>
.groupID{
max-height: 100vh !important;
overflow: auto !important;
}
</style>
Right?

How do you apply the scroll bar to the container group instead go the Repeating Group?

*RP was a tipping error, I meant RG. When I wrote this post was almost 4 am in Lisbon, Portugal :sweat_smile:

*EDIT
I got this to work, but know the RG doesn’t scroll…


*EDIT_2

I forgot to add “-y” to the overflow and replaced “auto” for “scroll”.

<style>
.groupID{
max-height: 100vh !important;
overflow-y: scroll !important;
}
</style>

Now it’s WORKING!!! @boston85719 thanks for the tip mate! I owe you a beer!

Same way you did I believe, as the code you shared looks like it is attributed to the group.

No worries, glad you got it to work.

hey all, here’s a new plugin to help improving vertical responsiveness of groups. Among the different tools offered, there’s one to set a group’s height based on the viewport!

1 Like

The RG is set to full list (usually I restrict it with :items until operator and add pagination, but that might not be what you are looking for). When it is full list and the Group is set to max width with scroll on auto, if the full list goes beyond the max height setting the scroll bar kicks in and allows the RG to be scrolled.

FYI this has a Bubble glitch if there’s anything underneath the RG on the page, such as a message-entry field in a chat window. Bubble will still calc the “actual” total height and draw all footer-type elements at a (potentially very) large offset underneath. This was also detailed here:

http://forum.bubble.io/t/full-list-sizing-problem/142275

Haven’t found a great way yet to either A) stop Bubble from drawing footer elements at full-offset when using full list RG style or B) force Bubble to load ALL RG elements on page load when in Vertical Scrolling style. There’s a hack for (B) that involves forcing a scroll-to to the bottom RG element and then back to the top element, which will indeed force all the RG’s rows into view, but it’s pretty glitchy looking to the user. If anyone’s got any ideas, I’d love to hear them!

@anon38627393 not really sure what glitch you might be referring to. I have never experienced that with how I set things up…here is a video showing a setup in a fully responsive messenger template I have…the input element remains below the repeating group and there is not large offset.

BTW you can check out this free tutorial to get a setup that should work properly.

Thank for your reply! Yes I actually purchased your template a week back just to examine it to see if I could solve the issue. Your template is an RG that is not set to full-list but rather vertical-scrolling. Taking the thread-list example on the left, as it is set, your RG always just displays 9 or 10 cells in view, which will not uncover the aforementioned bug. The issue arises when trying to make the height of the RG completely dynamic to the viewport (ie stretch literally from the top of the page to the bottom, responsively from mobile all the way up to 30" monitors). Your RG, when dynamically stretched, could seek to display 15, maybe even 20 cells on a 30" monitor. The problem with Bubble is, it will not auto-populate these extra 5 or 10 cells autonomously when you’ve defined the RG with 9 or 10 cells, using vertical scrolling. The other option is to force the RG to use a full-list methodology with CSS to show a scrollbar, but then you’ll run into the issue I’ve already mentioned regarding footers.

I’m not really sure the issue still. Here is a video showing how I have a page setup with a repeating group setup as the tutorial linked did it, and on that page is a footer element set to be at the bottom of the page.

Thanks so much for taking the time to help. Here’s what’s going on: (warning: terrible mic quality)

//s3.amazonaws.com/appforest_uf/d90/f1634156682327x357952976789256640/RG.mp4

If the floating group doesn’t work for you because you don’t want to use a floating group then use the CSS position property to set the position of the bottom group.

Takes a bit more work to ensure it is always in the proper space, but it can be done.

1 Like

has anyone used the new responsive engine to adjust height based on % of viewport? I’m still learning it, but implementing this behavior doesn’t seem trivial. Thoughts?

A related question is why can’t you just use height: 100vh;? This CSS doesn’t seem to be working for me either. Would rather not install zeroqode’s plugin that could slow down performance, if possible.

Jack

You can do that with the new responsive engine setting on height in the layout tab…however, custom css doesn’t work at the moment in the new responsive engine for adjusting heights.

sounds good! i’ll keep playing with it. thanks for the confirmation.

Hi… are there any updates to doing this in the responsive engine? It is super frustrating to not be able to make the last group of a responsive page to basically fill all of the remaining vh

I’ve been submitting requests for a height setting to be a third choice, 100% of available space, rather than always have it be 100% of container as that causes issues with page design as well as container design. If have a container with a header and repeating group element is 100% it is 100% of container, so repeating group overflows container by the same height of the header. Should not be that way only, and should have a 3rd option of 100% of available.

For now I just use custom css to get my designs completed properly.

2 Likes

Ah, okay, the note above mentioned that it wasn’t working with the responsive engine, but if it does I will keep trying it. Thanks

I think I am missing something here… if anyone can provide some guidance it your really help.

I have two main subgroups (Top and Body) in the main pane. Top is a set height and I want Body to basically be everything that is left.
image
So, I installed classify as suggested and hit the following HTML on the page:

.fillspace{ height: calc(100vh-352px) !important; overflow-y: scroll !important; }

image

352 is the height of Group Top and the header.

The, I added the ID Attribute
{addClass: “fillspace”}
to Group Body, Group Full Grid, RepeatingGroup and Group Preview Box.

But the height of Group Body is still expanding to the full height of all the rows in the Repeating Group.

Can anyone help with letting me know what might be wrong?

1 Like

in the calc function should have a space between vh - and 352; it is a bit tricky and needs to be set properly

I personally wouldn’t use the css for overflow and instead use the built in Bubble function to allow vertical scroll on overflow; my main use of CSS is to adjust heights and RG cells columns/rows