Background
Flexible height galleries are very versatile and have many use cases. I personally prefer to use them over fixed height galleries even if the data doesn't warrant using one. That's because of one simple reason - a flexible height gallery can act as a fixed height gallery but it doesn't work the other way round.
Height of a fixed height gallery
There are multiple ways you can calculate the height of a fixed height gallery. If the data is more than the height, the gallery gets a scrollbar/navigation. But if you don't want a scrollbar, you can set the height to be the template height times the number of rows (assuming zero padding). Here is the expression to calculate the exact height of a fixed height gallery:
CountRows(Self.AllItems) * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePaddingHeight of a flexible height gallery
The incorrect way
It is very tempting to use a similar expression to calculate the height of a flexible height gallery. However, it doesn't work perfectly (unless each row of the gallery is of the same height) since a flexible height gallery doesn't have a fixed template height. Calculating the exact height of a gallery is important not just to avoid scrolling but also if you want to place a button right below the gallery. If your gallery's height is more than what's needed, there will be a huge gap between the last row of the gallery and the button below (with the button Y position set to Gallery.Y + Gallery.Height + 20). Here is how that gallery will behave if you use the above mentioned formula:
The right approach - setup
To calculate the exact height, add a label to the gallery. Here are the 3 controls in my gallery galFlexibleHeight:
- lblDesc - a label to display the description of each row
- shpSeparator - a thin rectangle to denote the end of each row
- lblHeight - a label to calculate and display the height of each row
In my example, the Y position of shpSeparator is
lblDesc.Y + lblDesc.Heightand its height is set to 4.
Each row (or data card) in a flexible height gallery expands according to the control that has the highest value of Y + Height. In this case, since shpSeparator is positioned below the lblDesc, the shpSeparator's Y position + height will determine the size of each row.
With that said, set the Text property of lblDesc to
shpSeparator.Y + shpSeparator.Height + Parent.TemplatePaddingNOTE: Do not position the lblDesc control in such a way that it's Y+Height is greater than the Y+Height of shpSeparator.
With this label added, the gallery looks like this:
"Sum" fun with flexible height galleries!
Now that we have the height of each row, you can set the height of the gallery to the following formula:
Sum(
Self.AllItems,
lblHeight.Text
)In simple words, it is doing a sum of height of each row in the gallery. Now if you have a button with a Y position of Gallery.Y + Gallery.Height + 20, it will be placed exactly 20 pixels below the gallery. Here is how the same gallery with this modified height formula behaves:
Summary
Set the height of a fixed height gallery to the following expression to not have a scrollbar:
CountRows(Self.AllItems) * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePaddingSet the height of a flexible height gallery to the following expression to not have a scrollbar:
Sum(
Self.AllItems,
lblHeight.Text
)where the text of lblHeight is set to
(Y position of the bottom most control in a row) + (Height of that same control) + Parent.TemplatePadding
Hi, thanks for this. In your example above for the Flexible Height Gallery, what value / formula do you have in the ‘Template Size’ property? Thanks.
Apologies for the delayed response. To the best of my memory/knowledge, it shouldn’t matter in a flexible height gallery. I will check to confirm and then let you know
Thanks for this. How can I hide the number of parent height from showing in the label when app is viewed? this is my text function? Concatenate(Text(ThisItem.’Event Date’),”: “, (ThisItem.’Status Input’)) & shpSeparator_2.Y + shpSeparator_2.Height + Parent.TemplatePadding
Hey Matt, thank you for reading the post and for reaching out! If I am understanding correctly, you are trying to display some text and also using the label for the height calculation. If that is indeed the case, I just using a separate label for height calculation. Please let me know if I misunderstood it. Looking forward to hearing back from you.
Thanks Hardit, To better explain it is displaying the value of the height of each row for each list item. For example, “requirements.65” The number 65 shouldn’t be showing at the end of the label. Each item is showing the value of the height of each list item at the end.
Then you need to use two labels. One for the actual text you want to show. And one for the height. You can either set the Color of the one that shows the height to Transparent or simple set its height and width to 1. Let me know if that helps.
Alright a bit of a weird one. So, I followed this correctly and the Sum of the field differs from the height calculation resulting in a scroll bar being displayed but still increases the height.
Function is showing 358 and height under properties is showing 261
In case of Flexible Height Galleries with Horizontal Containers to place the label Fields.
The formula identified in the article does not work out.
The formula to calculate the gallery Height
Sum(
Self.AllItems,
lblHeight.Text
)
The LblHeight.Text gives out same values for all the rows even though they are of different sizes.
Hi Hardit.
Excellent article 🙂
Possible typo:
Should “With that said, set the Text property of lblDesc to” actually be “…lblHeight to”? If so, perhaps update the article.
Andy