cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
SuperSimon
Frequent Visitor

Flexible height Gallery and DataCard, no inner scroll

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.

14 REPLIES 14
v-siky-msft
Community Support
Community Support

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

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!

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

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.

Snipaste_2020-09-08_17-25-18.png

 

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

 

Hope this helps.

Sik

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

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.

 

wyotim
Resident Rockstar
Resident Rockstar

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 @cshan!

 

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

cshan
Regular Visitor

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.

cshan_1-1599612181031.png

 

 

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

Helpful resources

Announcements
User Groups Public Preview

Join us for our User Group Public Preview!

Power Apps User Groups are coming! Make sure you’re among the first to know when user groups go live for public preview.

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Top Solution Authors
Top Kudoed Authors
Users online (69,285)