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.
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
2 - Reusable element adapts to the viewport correspondently to #1
3 - Make the Repeating Group inside the reusable element scroll in and load more database entries
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
*EDIT
I got this to work, but know the RG doesn’t scroll…
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!
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:
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.
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.
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.
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.
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.
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