Unanswered

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

(0) Share

Report

Posted on by 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.

Categories:

Building Power Apps

I have the same question (0)

All responses (6)

Answers (1)

Verified answer

dinusc Microsoft Employee on at

Like (1)

Report

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.

Was this reply helpful? Yes No
bryan_0226-ag 53 on at

Like (1)

Report

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-Scrollable-Canvas/idi-p/62076

Was this reply helpful? Yes No
cmlohani 2 on at

Like (0)

Report

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)

Was this reply helpful? Yes No
Jace 58 on at

Like (1)

Report
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

Was this reply helpful? Yes No
Golly 127 on at

Like (4)

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

1 people found this reply helpful.

Was this reply helpful? Yes No
skim32 10 on at

Like (0)

Report
I also needed to do this for my App. The reason I needed this is because I wanted a horizontal gallery, but with a flexible height. So, I have a horizontal gallery that wraps every 3 items. So if I have 4 items, the gallery starts a new row. Of course, the gallery height does not change, so I have to scroll. The way I fixed was by setting the Gallery Height to the following formula.

Self.TemplateHeight * RoundUp(CountRows(Filter(Table,Column1=ThisItem.Variable, Column2=ThisItem.Variable))/3,0)

Basically it counts the number of items in a SharePoint list that I need and then divides it by 3. Then I round up. This allows to find the number of rows I expect there to be in the gallery. So, if there 3 items or less, it's 1 row. If there is 4 then it's 2 rows. If there is 7 then 3 rows. Then I multiplied that value times the Self.TemplateHeight. So that the height of the gallery will be the template height * the number of expected rows. It works beautifully for my use case.

Was this reply helpful? Yes No