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.
- “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)
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
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].