Forum Academy Marketplace Showcase Pricing Features

Setting a group to be % of viewport height dynamically

This is actually expected behavior.
In “traditional” web design, the various elements (div’s, etc) react to each other, because you simply can’t have magical whitespace without setting a specific element to be absolutely positioned.

In Bubble’s render engine, an element is ALWAYS absolutely positioned, unless it is touching and/or encompassed by another element. This means that in order to have group X affect group Y, they need to have some sort of established relationship (i.e. they should be contained within a group themselves).

If you carry the responsive model over to bubble, what happens, in order to create a truly responsive page, is that you will need to use a variety of “spacer” elements that may not actually be seen by the end user, but they do affect the elements that can be. As an example - let’s say that you have a floating group that wraps a vertical side menu. When the page width is < 768px, you hide that floating group.

Your other page elements don’t move. There’s just a large white space where the hidden floating group would be visible.

The way you adjust for this is to have a transparent group BEHIND the floating group, that you then set whatever conditional adjustments, or responsive setting to, and the other elements react accordingly.

1 Like

made a video tutorial on this topic Dynamically adjust Bubble page heights for mobile screens - make your apps look good on mobile screens

What an awesome thread. Thanks @brian1 for the great solution provided and @boston85719 for the classify idea.

I’ve successfully added 100vh and 100vw to my app page, but I’m struggling with a repeating group.

My setup:
page width: 1280px
page height: 900px

I placed a RE in the page that with 1215px (w) - 900px (h), and inside the RE among other elements I have a “Ext vertical scrolling” RP that stretches all the way to the bottom of the RE. Once made the main page 100vh and 100vw the RP broke and didn’t scroll. I tried to make it “vertical scroll” but now it only scrolls if the page viewport is higher than 900px.

*Btw: The RG also doesn’t stretch to the bottom of the page. It leaves an empty space between the viewport and page height difference.

Any hints what could be causing this and how to fix it?

Reusable Element

Main page

Preview

Thanks in advance :slight_smile:

can you share a link to the app?

Couple of thoughts here:

  1. You’ve statically defined the height and width of the RE. You need to actually calculate this dynamically. (I’ll get to this in a second)
  2. I personally wouldn’t probably use external scroll unless you have to. If you’re trying to hide the scrollbar, just do something like #RE_rg_id{overflow-y:hidden !important} in an html element (wrap it in <style></style> tags so its an actual CSS style sheet). That will hide the scrollbar. #RE_rg_id in this case is the id tag that you apply to the rg.

In regards to #1 above - what you need to do is calculate the:

  1. window height (the height of the browser window)
  2. height of the element(s) above rg
  3. get the pixel coordinate for the bottom of the element above the rg
  4. position the top of the rg in the proper place (the y axis offset)
  5. set the height of the rg to fill the remainder of the VH of the window

To get you headed in the right direction, you’ll need to use the “run javascript” in a page loaded workflow. You need to get the bounding client rectangle on the window for whatever div’s you’re having to use in the above. To do that you’ll use something like the following:

var header = document.getElementById('header');
var rect = header.getBoundingClientRect();

This will give you an object that will look like this:

{
  bottom: 775,
  height: 775,
  left: 0,
  right: 1322,
  top: 0,
  width: 1322
}

From there, you’ll need to set the position and height of the rg (or its wrapper), by doing something like:

var rg = document.getElementById('rg_id');
rg.style.position = absolute;
rg.style.top = rect.bottom +1;
rg.style.height = 100vh - rect.height;

Hope that helps get you in the right direction.

One other thought - you’ll probably want to do an on page resize event with the same thing as well.

2 Likes

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:

https://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!

@jesse.r.hunter 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.