Power Apps | How to get the height of any gallery (flexible too!)

What's the problem we're solving?

We want our apps to look natural and only have 1 scroll bar, we want to avoid nested scrollbars because our users hate them and find them confusing. 😡 Let’s dynamically get the height of our galleries to help our users! 

What's the solution?

Let’s dynamically calculate the height of the galleries! 

NOTE: For the purposes of this discussion, I am calling Vertical/Horizontal galleries “Regular” galleries.

Know the difference between "Regular" galleries and Flexible Galleries.

Row Heights

  • “Regular” galleries have the same height for every row. 
  • Flexible galleries can have different heights for each row. 
The Wrap Property
  • “Regular” galleries have a property called wrap
  • Flexible galleries do not have the property called wrap. 

Calculate the height of a "Regular" Gallery (Vertical/Horizontal)

Step 1: Set the template size to a static number. Note: This will be the height of each row

Step 2: Set the height of the gallery to the following:

				
					Self.TemplateHeight * CountRows(Self.AllItems)

Calculate the height of a Flexible Gallery

Step 1: Set the template size to a static value. Note: This will be the upper limit of the row height. 

Step 2: Add a label to the gallery. Rename the label to lblRowHeight

Step 3: Set the lblRowHeight’s Y property to the following: 

 
				
					Value(Self.Text) - Self.Height

Step 4: Set the lblRowHeight’s Text value to the height of the row. You can calculate this by getting the sum of any controls stacked vertically. 

  • Note: Don’t forget to include spacing
  • Note: If controls are side by side, be sure to account for the maximum height between the controls. 
  • The video walks you through this concept, here’s the link to that point in the video. 

     

Your code may look similar to the following, however it depends on your control setup: 
				
					Sum(
    imgSmallImage.Y, //First Item Y Value Spacing. 
    Max(imgSmallImage.Height, lblTitle.Height), // Image or Title height (whichever is bigger)
    // the spacing between the small image/title (whichever is bigger) and the big image. 
    If(imgSmallImage.Height >= lblTitle.Height, 
        imgBigImage.Y - (imgSmallImage.Height + imgSmallImage.Y),
        imgBigImage.Y - (lblTitle.Height + lblTitle.Y)
    ), 
    imgBigImage.Height, //Height of the big image. 
    lblBody.Y - (imgBigImage.Height + imgBigImage.Y), // Spacing between big image and body 
    lblBody.Height
)

Step 5: Calculate the height of the gallery by adding together the value of the labels from each row. 

				
					Sum(RenameColumns(ForAll(galFlexible.AllItems, Value(lblRowHeight.Text)),"Value", "RowHeight"), RowHeight) + Self.TemplatePadding * CountRows(Self.AllItems)

All done!

Picture of Michelle Sanchez

Michelle Sanchez

Senior Power Platform Consultant ✨

Table of Contents