Flexible height Gallery and DataCard, no inner scroll

(0) Share

Report

Posted on by SuperSimon

Hello all.

I am new to PowerApps but come from a development background so the learning curve isn't too steep.

I am trying to set a DataCard on a scrollable canvas to match the height of a flexible height gallery nested within it. I simply don't want an inner scroll within the DataCard and just allow the canvas to handle the scrolling as one screen.

I have so far tried setting the DataCard height to Gallery1.Height+20 which seems logical to me but has absolutely no effect.

Is there a way I can achieve this? The gallery itself contains a varying amount of rows dependent on what item is selected in the parent gallery (on the master screen).

Any help is appreciated, thank you.

Categories:

Building Power Apps

I have the same question (0)

All responses (14)

Answers (0)

v-siky-msft Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
Hi @SuperSimon ,

Did you set the gallery height to a variable height based on the number of Items?

To implement the Flexible height of the gallery, please try to set the height property of Gallery to

CountRows(Self.AllItems)*200 // adjust the base height(200) to fit your case

Hope this helps.

Sik

Was this reply helpful? Yes No
SuperSimon 15 on at

Like (0)

Report
Copy link

Link copied!

Hi Sik

Many thanks for this, and the result is certainly a lot closer than I've got so far!

However, setting a base height is probably the thing I need to tackle the hardest.

The flexible height gallery is populated by a filter and so on some occasions, it may contain 4 rows in the gallery and on others, 20 rows and all with varying height.

So it seems I need to load the gallery, get the height of that loaded gallery and then apply that to the DataCard... if possible!

Was this reply helpful? Yes No
SuperSimon 15 on at

Like (0)

Report
Copy link

Link copied!

I should say as well, each text label within each row in the gallery is set to AutoHeight too as the text length varies.

Was this reply helpful? Yes No
v-siky-msft Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @SuperSimon ,

Do you mean the base height of each item in gallery is different?

In my test, I set the base height to 180, and it works well. The Gallery height varies with the number of items, and the Data Card height varies with the gallery height.

Does this make sense for your case? If not, please share more information about your scenario.

Hope this helps.

Sik

Was this reply helpful? Yes No
SuperSimon 15 on at

Like (0)

Report
Copy link

Link copied!

Hi Sik

Thank you again for your help.

So the base gallery height will change, dependent on how many rows are returned from the filtered gallery. Those individual rows will also be different in height dependent on the amount of text displayed in the label in it.

Many thanks,
Simon

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
Hey Simon,

Avoid scrolling of Vertical Gallery inside a Canvas Data Card:
For a regular Vertical Gallery, you could simply set the Height property to

CountRows(Self.AllItems) * Self.TemplateHeight

This way your gallery dynamically grow to include all items with no scroll bar.

Your Data Card will dynamically expand to the maximum bounds of your controls, so if your gallery is the 'bottom' control in your data card, the data card will expand to contain it.

Think of the Data Card 'Height' property as "minimum" of sorts. I've found expressions in Data Card height to cause display issues.

Dynamic Height of Flexible Height Galleries:
I have attempted to recreate this scenario but I'm not sure there is any built in PowerApps function to determine the Sum (or even Maximum) height of your Gallery items, which would be necessary to alter the dynamic Height expression.

Was this reply helpful? Yes No
wyotim 2,545 on at

Like (0)

Report
Copy link

Link copied!
Hi @SuperSimon, I've been working on a similar issue this morning. What I used to do was to put a label in each gallery row that held the height of that row, usually by adding the bottommost element's Y and Height properties (along with a bottom offset if necessary). Then I would put the following in the Height property:

/* For a gallery, galMyGallery, and label to calculate the height of each gallery row, lblRowHeight */ Sum( galMyGallery.AllItems, Value(lblRowHeight.Text) )

I came back today after a week off and found that using this gives an error now. The label for the row height works but the sum function returns the error.

What seems to be working is to put that same formula in a label outside of the scrollable gallery (i.e. somewhere on the screen itself) and then reference the value of that label in the Height property. I'm not sure why it matters now where that formula is but apparently it does matter.

And for the record, using

CountRows(Self.AllItems) * Self.TemplateHeight

seems to use the Height of the first row of the gallery, which can work if that happens to be the tallest row but isn't so great otherwise. A great suggestion though @Anonymous!

Feel free to let me know how that works for you or if I can clarify anything! Cheers!

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
Hey all,

Had another think... Going to post a solution for this, but I have not thoroughly tested. Perhaps you guys can test it (or improve it!).

Variable Height Gallery Properties:
Height: varHeightSum
Template padding: 0

Gallery Item:
Label : AutoHeight
Label Padding Top/Bottom: 0
Toggle Default: varToggleCalc
Toggle OnCheck:
UpdateContext({varHeightSum: varHeightSum + Label.Height});

Button:
OnSelect:
UpdateContext({varToggleCalc: false, varHeightSum: 0});
UpdateContext({varToggleCalc: true});
I will note, without setting the Padding values to 0, I would still get a short amount of scroll in my Gallery.

I hope the logic is clear enough. In this proof of concept, clicking the button will trigger all Gallery items to add their AutoHeight Labels Height to a local variable, which we then use as the Height of the Gallery. Let me know if you need an explanation of what's going on.

This method could be adjusted to reference other dynamically sized controls in your Gallery Items.

Was this reply helpful? Yes No
SuperSimon 15 on at

Like (0)

Report
Copy link

Link copied!
Hi @wyotim

And thank you for your answer. I'm trying to play around with it now to see if I can achieve the result.

So insert a blank label somewhere onto the canvas, and set the height property to:

Sum( galMyGallery.AllItems, Value(lblRowHeight.Text) )

(Obviously substituting my names for yours). And then set the height of the gallery to:

MyLabel.Height

Does that seem correct? I've just tried it that way and my gallery disappears as if it doesn't have a height value. If I specify a value in the label it seems to work but all I'm doing is adding creating too much space (if I specify a large number) and to get it perfect would probably need the label value to be updated every time.

Thanks for your help,
Simon

Was this reply helpful? Yes No
wyotim 2,545 on at

Like (0)

Report
Copy link

Link copied!
Hey @SuperSimon, I think you will need to wrap it in a Value function and use the Text property instead of the Height property, like so:

Value(MyLabel.Text)

I think I wasn't very clear in explaining that, so my apologies for that! You are basically using the text of the label, which should equal the height value you want. The Value part is to let Power Apps know it is a number, as opposed to text.

Hopefully, that does the trick but feel free to let me know if it doesn't!

Was this reply helpful? Yes No