@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.
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.
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.
So, I installed classify as suggested and hit the following HTML on the page:
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?
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
Thanks for your help @boston85719 … this is up and running now in the responsive engine and works perfectly… I just had to add the spaces to the calc and take the max height off all the groups in the Layout tabs.
Hello gents, I have a slightly different issue, and can not get it running, maybe someone from more experienced members can help out with CSS?
Basically, I have “Bottom sticky mobile menu” on every page, this is Reusable elements, and consists of 5 Groups.
Last Group is called Menu, and when I press the group I want “Side Bar menu” to open on side.
For Side Bar menu I used Group Focus, but I’m having issues with top offset.
I put top offset 562 height in minus
which is ok if screen height is 582, but if it’s higher, menu is not on full page size, as you can see on these 4 screens:
Is there any way to dynamically change top offset based on view height of user?
Thank you in advance!
Anyone here gents? 
If anybody is looking to combined position:sticky and 100% viewport height, modify the above to two snippets to grab the viewport height with javascript and set the height properties to that variable.
I did this for a map to get a scrolling effect similar to AirBnB, where the map is full height of the viewport but scrolls with the user as they explore more listings down the page.
<div id="map"></div>
Add workflow javascript to run on page load:
const height = window.innerHeight; $(document).ready(function(){ $("#map").parents(“div.bubble-element.Group”).css(“min-height”,height,“max-height”,height,“height”,height); });
Add this to your page HTML header:
<script>
var height = $(window).innerHeight;
$(window).resize(function(){ $("#map").parents("div.bubble-element.Group").css("min-height",height,"max-height",height,"height",height); });
</script>
To make it sticky, add this to your CSS (page HTML header):
#sticky {
position: sticky;
top: 0px;
}
In my case, the HTML element is setting the ID of “#map” on the object I want to be sticky. That parent group has the ID of #sticky.
Can you explain more please and maybe provide screenshots, confused as to what I am writing in my HTML element, and weather I am naming the parent group ID or the group I want to be sticky resize’s ID?
Thanks