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?

https://youtube.com/watch?v=-Jb-HW-sqKQ%3Fcontrols%3D1%26rel%3D0%26playsinline%3D0%26modestbranding%3D0%26autoplay%3D0%26enablejsapi%3D1%26origin%3Dhttps%253A%252F%252Ftheloadingpoint.com%26widgetid%3D1

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)

Copy

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
)

Copy

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)

Copy

All Done!

For more great blogs click here

About the Author:

• I’m from the United States, but both my parents are immigrants from other countries (Costa Rica & Mexico!)
• My mom did foster care so I grew up with loaaaads of kid 
• I moved a LOT growing up (California and Massachusetts), almost moved to Canada and was homeless for a bit too! 
• I got married at 21, and moved to another state immediately after (Georgia/Florida, too humid )
• We have 2 rescue dogs that outweigh me!
• I’m pretty awkward and introverted, but if I’m excited about something I could talk endlessly 

LinkedIn / Twitter / YouTube

Reference:

Sanchez, M. (2021). Power Apps | How To Get The Height Of Any Gallery (Flexible Too!). Available at: https://theloadingpoint.com/2021/10/get-power-apps-gallery-height/ [Accessed: 15th March 2022].