How to make Repeating Group height dynamic to fit screen resolution?

Hi Bubblers!

Edit: Changed the category from ‘Need Help’ to ‘Tips’ since there’s a solution now :slight_smile:
Edit again: This only works on Firefox, not Chrome and Safari. So this needs Bubble’s help and reverting back to “need help:frowning:

I’m struggling to get a repeating group to resize dynamically according to the screen resolution of the user.

One little caveat: the repeating group has to be set to “Vertical scrolling” so as to scroll within the group and not scroll the whole page (I want the UX to feel like an app and not a web page), so I can’t use other layout styles such as full list etc.

And on this basis, I’m trying to get the height of the repeating group to expand based on the screen resolution of the user. So whether the user is on a 13" macbook or a 27" monitor the height of the repeating group will dynamically change and fill the height of the page.

I’ve checked out other posts like Expanding the height of a repeating group dynamically but this refers to something different, not exactly to this scenario.

Here are two examples of the layout, one with a higher resolution than the other:

Lower resolution:

Higher resolution:

Any suggestions on how I can expand the RG on the higher resolution to go down to the bottom of the page while still keeping the layout style to “Vertical scrolling”?

1 Like

So after a bit of digging around I found a solution for this. I added Javascript to the Page HTML Header and adjusted the size of the repeating groups relative to the original design time size. However although this has resized the repeating groups perfectly :slight_smile: it’s also uncovered a bug :fearful:.

First the solution. Here’s the JS I added to the Page. I know exactly which Repeating Groups I need to update so I just use the index directly to reference the elements and adjust the height with the difference:

<script type="text/javascript">
/**
 * Resize the two main Repeating Groups
 * Bubble app developed using a 663px browser height
 * so just work out the difference on page load and
 * on page resize events and apply the difference.
 */
function changeRGSize() {
/* Get browser height and width */
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		myWidth = window.innerWidth; myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
		myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
	}
/*	window.alert( 'Width = ' + myWidth + ' and height = ' + myHeight ); */
/* Default browser height for this build is 663px so adjust the difference to a little less than the user's browser */
	if (myHeight > 663) {
/* Get all the Repeating Groups */
		var allRGs = document.body.querySelectorAll('.RepeatingGroup');
/* First RG is for the templates */
		var newHeight = 388 + myHeight - 673;
/*		alert('changing from ' + allRGs[0].style.height); */
		allRGs[0].style.height = newHeight + 'px';
/* Second RG is for the text copy */
		newHeight = 503 + myHeight - 673;
/*		alert('changing from ' + allRGs[1].style.height); */
    	allRGs[1].style.height = newHeight + 'px'; 
	}
}
  
/* Add event to resize repeating groups on page load */
	window.onload = function() {
		changeRGSize(); 
}
/* Add event to resize repeating groups when page is resized */
	window.onresize = function() {
		changeRGSize(); 
}
</script> 

Now to the new problem. Although the height of the repeating groups have been resized perfectly, they don’t display all the the entries they’re supposed to. They’re missing approx 20% of records in the repeating group. It all scrolls well (Layout style is “Vertical scrolling”), but it just doesn’t show all the records it’s supposed to. Not sure if this is something interfering with Bubble’s inbuilt rendering or something else.

Thoughts? @emmanuel ?

4 Likes

How does the effects compare with resizing the browser window?

Possibly the RG has an internal representation of its size, and it isn’t seeing your changes. Could try triggering its resize event, or on its parent, or something like that.

hi @mishav. i’ve tried resizing and going through many different variations but the RG doesn’t seem to display the correct number of records unless the height of the RG is the same as the design time size.

And I don’t see that I can manipulate any other CSS styles to repurpose the widget. It must be something at the Bubble layer that needs to be tweaked to make this work. If @emmanuel could do something then I’ll be eternally happy, because then I can build apps with controls that react to the browser.

Here’s the CSS with the height changed. If you have any other ideas please let me know :slight_smile:

Hi @gakanimal I had a play …

After increasing the height of a RG using style.height, its scroll was unresponsive.

I then did a Bubble workflow action ScrollTo last item. The RG happily did that and was able to scroll up and down the full list.

I added some new items to the list, the RG didn’t scroll down to them, although another workflow action ScrollTo last item worked again.

I guess you also have the option of building your own container in HTML, a lot more work but more precise control.

Alright @mishav that got me thinking so thank’s a lot for that. I know in another post someone mentioned that you can add the Javscript Toolkit plugin and call JS from within workflow which sounds cool, and might have worked with your approach. But the “scroll to end” wouldn’t have worked nicely from a UX point of view. So I had another rethink.

I went with a different approach in the end. In design time, I made my Page much higher at 1285px and heightened the Repeating Groups to the available page height. Then I used JS to shrink the Repeating Groups and page down to the size of the browser at runtime.

This works nicely!! :heart_eyes: No need for hidden HTML elements or workflow. Just plain JS in the Page HTML Header. And I used http://quirktools.com/screenfly to test it out on different resolutions.

So we’re all good !! :slight_smile:

Edit: This only works on firefox, not chrome or safari :frowning:

Here’s the final JS I used:

<script type="text/javascript">
/*********************************************
 * Resize the two main Repeating Groups and Page.
 * Bubble app developed using a minimum 663px browser height suitable 
 * for a Macbook 13" but needs to handle multiple resolutions. So what we
 * do is make the page and RGs very high at design time and then reduce them
 * to the height of the browser. This works well. If we just expand the RGs then 
 * the RG doesn't show all the records, some kind of interference with the Bubble
 * layer stops that from working well.
 **********************************************/
function getMyHeight() {
/* Get browser height */
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
      myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }

/* Minimum browser height for this build is 663px suitable for Macbook 13" */
    if (myHeight < 663) {
      myHeight = 663;
    }
    return myHeight;
}

/* Reduce size of Repeating Groups to adjust to the browser size */
function changeRGSize() {
/* Get browser height */
    var myHeight = getMyHeight();
/* Get all the Repeating Groups */
    var allRGs = document.body.querySelectorAll(".RepeatingGroup");
/* First RG is for the templates */
    var newHeight = myHeight - 285;
    allRGs[0].style.height = newHeight + "px";
/* Second RG is for the text copy */
    newHeight = myHeight - 170;
    allRGs[1].style.height = newHeight + "px";
}

/* Reduce size of Main Page to adjust to the browser size */
function changePageSize() {
/* Get browser height and width */
	var myHeight = getMyHeight();
/* Get the Page element using its class */
    var allPGs = document.body.querySelectorAll('.Page');
/* Should be just 1 so update it */
    allPGs[0].style.height = myHeight + 'px';
}

/* Add event to resize repeating groups on page load and page resize */
window.onload = function() {
    changeRGSize();
    changePageSize();
}
window.onresize = function() {
    changeRGSize();
    changePageSize();
}
</script>
2 Likes

@gakanimal I am really interested in your approach. I followed the guidelines of increasing both page and repeating group and then applying the JS into header. I must be missing something… Because it doesn’t seem to be adjusting. Is there anything obvious “step” you may not of mentioned which would be obvious to someone working with JavaScript. Thanks in advance

Hey @Tim_h, no other obvious step from a JS perspective. I use Code Inspector in the browser to see what classes the element is using that I want to change. In the example below I inspect the Repeating Group element and see that the class is div.bubble-element.RepeatingGroup.

You don’t need to specify the whole class string, just one class will do so long as it’s unique to the element type. In this case, I only need to search for the .RepeatingGroup class to retrieve the multiple Repeating Groups I am using into an array that I can reference individually:

/* Get all the Repeating Groups */
    var allRGs = document.body.querySelectorAll(".RepeatingGroup");

And then just use an index to reference a specific Repeating Group:

/* Second RG is for the text copy */
    newHeight = myHeight - 170;
    allRGs[1].style.height = newHeight + "px";

PS: I tend to use alerts in the JS to debug whether something is working or not. Place alerts in different parts to see where the JS is stopping. For example:

    alert('myHeight = ' + myHeight);`

Hope that helps?

@gakanimal thank you for the help and guidance. Excellent

1 Like

Ok @mishav @Tim_h it seems I spoke too soon…

This works on Firefox but not with Chrome or Safari :rage:

Whether starting with a smaller RG at design time and expanding the height in JS on page load, or starting tall and using JS to shrink on page load, after adjustment the RG control loses its ability to scroll (no vertical scroll bar) in Chrome and Safari.

So I’m back to square one…

I’ll admit I’m getting a little frustrated with this now. Having controls (especially repeating groups) that resize to the browser make the difference between a responsive app with great UX and just another web page that scrolls in the browser to the end of the page. From a UX point of view, most of the apps I’d planned to build would have a far better UX experience if RG’s would adapt to the different resolutions being used.

I can’t think of any other workarounds based on this limitation. Time for a coffee and a re-think…

@gakanimal this is weird. I can get it to work in Chrome but not every time. if i reload the pages sometimes it does and others not!

Its probably a matter of timing … try leaving the function in the page html header, but calling it after page load.

This topic was automatically closed after 70 days. New replies are no longer allowed.