Canvas Apps Controls UI

How to calculate the height of a flexible height gallery!

Twitter feed using a flexible height gallery
Twitter feed using a flexible height gallery

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.TemplatePadding

Height 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:

Incorrect height of a flexible height gallery
Incorrect height of a flexible height gallery

The right approach - setup

To calculate the exact height, add a label to the gallery. Here are the 3 controls in my gallery galFlexibleHeight:

  1. lblDesc - a label to display the description of each row
  2. shpSeparator - a thin rectangle to denote the end of each row
  3. lblHeight - a label to calculate and display the height of each row

In my example, the Y position of shpSeparator is

lblDesc.Y + lblDesc.Height

and 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.TemplatePadding

NOTE: 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:

Row height in a flexible height gallery
Row height in a flexible height gallery

"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:

Exact height of a flexible height gallery
Exact height of a flexible height gallery

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.TemplatePadding

Set 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

Recent articles

  1. How to create custom errors in Power Apps!
  2. A-Z: 26 tips! Learn how to improve your Power Apps!
  3. Office365Users Connector – Get rid of this warning!

12 thoughts on “How to calculate the height of a flexible height gallery!”

  1. 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.

    1. 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

  2. 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

    1. 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.

      1. 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.

        1. 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.

  3. 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.

Leave a Reply