Powerapps - How to set dynamic height of a gallery in a canvas app

[Owizardo]

Hello, 

I have a canvas app with 2 flexible galleries, layed one on top of the other. One of my galleries can have about 1 - 50 items in it, where it can contain small to large amount of texts / paragraphs. What im trying to achive is simply to allow a single page scroll instead of 2 seperate scrolling areas. 

In each of my galleries I have a label text set to auto height. I then set the template_size of my gallery to: 

Label_Text_In_My_Gallery.Height * CountRows(My_data)  

I then set my data card's height to the height of my galleries:

Gallery1.Height + Gallery2.Height

While this in theory would work, however it seems that Powerapps only calculates the first item in the gallery and the rest is ignored.

For example, lets say my first Item has very large text with 5 paragraphs. My second item in the gallery only has one paragrah of text. Well powerapps seems to set my second item (and all the remaining items) to the size of the first item (5 paragraphs) or vice versa. So this is creating alof of blank space. 

Has any come across this issue and know of a work around? I would really appreciate some feedback on this.

[dinusc · Accepted solution]

Hello @Owizardo,

Please note that the flexible height gallery was designed to estimate the content size and to adjust its height accordingly. You shuold never be setting the tepmlate size of the flexible height gallery.

Have you tried setting both auto-height enabled labels in a card? I think that by doing this, you shuold be able to have both labels on top of each other and have a single scroll.

[bryan_0226-ag]

Once you have the DataCard1 and Gallery1 (inside of DataCard1) created, I got it to work using the following:

Step 1:

Set the Gallery1.Height=Separator1.Y*Count(Gallery1.AllItems.ID)+20.

The "ID" portion likely depends on the items you are referencing. The sharepoint list I am using as an ID field. Basically this took the Y-height of my separator line and multiplied it by the number of items in the gallery. The "+20" at the end was to give me a little extra space at the end of the gallery to make sure it fit.

Step 2:

Set the height of DataCard1=Gallery1.Height.

This auto-heights the datacard to expand or shrink depending on the number of items in the gallery.

I did not touch the Gallery1.TemplateSize property.

To get Gallery1 inside of DataCard1, this person figured it out: https://powerusers.microsoft.com/t5/PowerApps-Ideas/Insert-Gallery-and-Forms-component-into-Scrollab...

[cmlohani]

So to set he height of the gallery dynamically I just got the count of the existing rows using CountRows in that gallery and multiplied it with the template size of the gallery.
Height = CoutRows(Gallery.AllItems) x Template size (you can take a +-5 of the template size as well)

[Jace]

Thank for posting your details @bryan_0226-ag  and @cmlohani .  Your posts helped me come up with the dynamic height of a gallery.  I have adjusted it to also include the template padding to get all the variables I need for the dynamic height.  Hope it helps.

Height = CountRows(Gallery.AllItems)*Gallery.TemplateHeight + CountRows(Gallery.AllItems)*Gallery.TemplatePadding

[Golly]

There is a way around this nested flexible gallery limitation!  In my example there are multiple text fields in the gallery item/row/template that are all set to auto-height and each can be a different height.  The steps are as follows:

1. Make sure the labels in your nested gallery item are set to auto-height.

2. Set the Y position of the item furthest from the top (usually a separator between gallery items) to:

Separator.Y=Max(Label1.Height,Label2.Height,Label3.Height,Label4.Height)

 This will find the largest height value of your labels and put the separator on the bottom of that.

3. Create a label in your nested gallery item and set the text value to: 

Label.Text=Separator.Y+Separator.Height+Parent.TemplatePadding

This will give you the height of each flexible gallery item, including the height of your separator and any padding.  I set this label to not be visible and reorder it to the back of the item list so it doesn't interfere with any other functionality.

4. Set your nested Gallery height to: 

Gallery1=Sum(Self.AllItems,Label.Text)

 This sets the nested gallery height to be the sum of all the calculated template heights!  

A very clever solution that I cannot take full credit for.  See here for original.