Flexible height Gallery and DataCard, no inner scroll

Like (0) Share

Report

Posted on 7 Sep 2020 21:05:17 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.

I have the same question (0)

All responses (14)

Answers (0)

tlien 4 on 13 Nov 2020 at 10:08:15

Like (0)

Report

Re: Flexible height Gallery and DataCard, no inner scroll

Hi Simon,

I have been struggling with exactly the same issue. I've been making a screen which shows a full message thread. Imagine a "main message", which will always be shown at the top, and then a gallery of responses - the remaining thread underneath. The main message is placed in the first datacard on a scrollable screen. This datacard's height is set to height of the flexible HtmlText within it + padding.

The remainder of the thread is then shown in a flexible gallery in the second datacard. All gallery items contain an HtmlText with auto height = true. The intuitive thing to do is to then set the gallery height to Sum(Gallery.AllItems, HtmlText.Height) - however, that is not possible. What I did to make it work was this:

Add a slider to the gallery. Set its max to something ridiculous, so that it is never capped. Mine is set to 2500.
The slider's default value should be set to the height of whatever text field you're using (HtmlText, multiline label etc.) + your desired padding. Or, as in my case, I set the default value of the slider to my bottom divider's y position + padding, as it is already positioned dynamically under my text field.

Now you can sum up the total value of your sliders in your Gallery's height property. Sum(Gallery.AllItems, Slider.Value). If your padding is not enough, just add a bit more in the slider's default property, or simply add it in the final sum. Once you know that it is working, just set the slider's visible property to false.

Of course you also want to set the scrollable screen datacard which holds your gallery to the height of your gallery + padding. I say padding because I always add a little to the total height. Without any padding, especially in the gallery height, you may be forced to scroll a tiny bit. I add the padding either in the slider's default value, e.g. HtmlText.Height + 50, or in the Gallery's height property, e.g. Sum(Gallery.AllItems, Slider.Value + 50), where 50 is the padding. As the gallery is refering to itself, you could also use Sum(Self.AllItems, Slider.Value + 50). Adjust the padding to the point where the height is just enough to not need scrolling.

It's dumb that you have to work so hard to hack your way to such basic functionality. But this is relatively fast and easy to do, and it works. Good luck 🙂

Was this reply helpful? Yes No
SuperSimon 15 on 11 Sep 2020 at 08:58:22

Like (1)

Report

Re: Flexible height Gallery and DataCard, no inner scroll

Hi @wyotim

Thanks again for your suggestion.

Unfortunately, I couldn't get it to work so ended up moving the gallery to a new screen instead.

Thanks again for your help!

Was this reply helpful? Yes No
wyotim 2,545 on 10 Sep 2020 at 14:31:50

Like (0)

Report
Re: Flexible height Gallery and DataCard, no inner scroll

Hey @SuperSimon, apologies for the late reply. I posted my last message and had to run to an appointment and was unable to come back to this until now.

The formula to calculate the height of the gallery should be in the Text property of Label5. So when that label is visible, the text value you see will be the calculated height. Setting the Height property of Gallery7_1 as:

Value(Label5.Text)

should then do the trick. Again, my apologies as I think I didn't explain things very well. So to recap, put the Sum formula from before in the Text property of Label5. Then reference that label (as shown above) in the Height property of your gallery. Finally, set the data card Height property to the Height of Gallery7_1.

Again, let me know if any more issues arise! I'm always happy to follow up! Cheers!

Was this reply helpful? Yes No
SuperSimon 15 on 09 Sep 2020 at 22:00:18

Like (0)

Report

Re: Flexible height Gallery and DataCard, no inner scroll

Hi @wyotim
Thanks again for your help... and continued patience!
I still can't get it working and I'm probably missing the point somewhere. The Label still needs a value for it to have any effect, what value do I need to be specifying there?
Here is a screenshot of my set up (Label5 is the label I have included and Gallery7_1 being the gallery). They are temporary names!
~~I've just had a thought, shouldn't I be applying this height property to the datacard containing the gallery?~~ Scrap this bit, I'm setting the height of the DataCard to the Gallery7_1.Height

Was this reply helpful? Yes No
wyotim 2,545 on 09 Sep 2020 at 21:53:02

Like (0)

Report
Re: Flexible height Gallery and DataCard, no inner scroll

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
SuperSimon 15 on 09 Sep 2020 at 21:38:08

Like (0)

Report
Re: Flexible height Gallery and DataCard, no inner scroll

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
Community Power Pla... on 09 Sep 2020 at 00:43:31

Like (0)

Report
Re: Flexible height Gallery and DataCard, no inner scroll

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
wyotim 2,545 on 08 Sep 2020 at 18:21:14

Like (0)

Report
Re: Flexible height Gallery and DataCard, no inner scroll

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... on 08 Sep 2020 at 10:48:35

Like (0)

Report
Re: Flexible height Gallery and DataCard, no inner scroll

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