# Power Apps How To Get The Height Of Any Gallery

## 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)
```

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
```

Copy

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!

• 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

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

Rate this Post:

Share:

Topics:

PowerApps

Tags:

Mar 29, 2024

Sep 15, 2023

Sep 13, 2023