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

Need help
2

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