Flexible Height Gallery Issue

[tagustin]

@RandyHayes 

Hello Randy,

I hope you are doing well. I see you've been active on the Community boards recently so I thought I would try tagging you. I'm working on an Onboarding app. The Onboarding Tasks gallery is a flexible height gallery. It works fine in studio mode, but not in published play mode in a Microsoft Edge browser. I've read through Community posts, blogs and watched videos, but none of the formulas outlined so far have resolved the issue. It is an expandable/collapsible gallery that operates on a variable so not sure if that is adding complexity to what should be a pretty straightforward use case.

Here is a snapshot of what the published version looks like in Edge. The TemplateSize formula is below. AutoHeight and Wrap are currently turned off for all of the labels except for the Task Description label that is highlighted in yellow. Turning them all on hasn't yielded any different result. The Description is a multiline plain text column in SharePoint and the label is a text label versus an HTML text label. A 2-page formula summary is attached in case you need to see any additional details. I'm really scratching my head on this one so I would appreciate any help you could give me since I can't launch it looking like this. Thanks! Teresa

btnOnTask.Y + btnOnTask.Height + lblActionItemOnDetails.Height + lblHelpfulInfoOn.Height + lblDescriptionOn.AutoHeight + 45

I've also tried setting the TemplateSize to a static 150 (same exact result). I noticed that the status label was sitting at a Y of 4 so I also tried setting the Template size to the following. No success with this one either. Same exact result. The lowest line is only cut off by a few pixels. I can't figure out what is causing the issue.

lblStatusOn.Y + lblStatusOn.Height + 150

There are no nested galleries within the main flexible height gallery.

[BCBuizer]

Hi @tagustin ,

I see you are referencing the AutoHeight property of the lblDescriptionOn control. Shouldn't that be the Height property?

btnOnTask.Y + btnOnTask.Height + lblActionItemOnDetails.Height + lblHelpfulInfoOn.Height + lblDescriptionOn.Height + 45

[tagustin]

@BCBuizer 

Hello BC,

That's how I had it at first before I tried the AutoHeight version. I changed it back to Height, just in case it would reset properly, but as you can see it is not unfortunately.

btnOnTask.Y + btnOnTask.Height + lblActionItemOnDetails.Height + lblHelpfulInfoOn.Height + lblDescriptionOn.Height + 25

[BCBuizer · Accepted solution]

Hi @tagustin ,

Referencing the  AutoHeight property will return a boolean, and will not add anything the TemplateHeight number. I just did a quick test with a label (Label1) that had AutoHeight enabled and a second label showing Label1.Height and the number was increasing when I added more lines to the Text property of Label1.

Any changes made to the PaddingTop and PaddingBottom properties also reflected in the value for the Height property.

After that I tried re-creating your set-up and found it is easiest to take the Y property of the bottom label as a reference point, rather than the top one so you can leave out have to calculate everything in between and compensating for adjustments made in the Y properties (+5, -3, -5). In your case this will result in:

TemplateHeight = lblDescriptionOn.Y + lblDescriptionOn.Height

[RandyHayes]

@tagustin 

Hi Teresa.  Hope you are doing well also!

So, you're actually doing more than you need to in your gallery controls.  When you use a Flexible Height gallery, it will adjust its size based on what is visible and what is not.  You don't need to mess with the height property or be so specific on the placement of the controls in it.

A couple of things to consider:

1) For your Icon.  Make it one icon.  Hiding controls and overlaying with another that is visible is generally not a good practice.  

So, for the View/Hide Icon, make it just one Icon and set the Icon property to:

If(varAccordion = ThisItem.ID, Icon.Hide, Icon.View)

2) Reference what you already have!  Do your visible formula once and then reference the control that contains that formula.

So, for your lblActionItemOnDetails Visible property, set it to:

varAccordion = ThisItem.ID || yourExpandAllToggle.Value

Then all the other controls in your gallery can reference the lblActionItemOnDetails Visible property.

i.e. lblHelpfullInfoOn Visible property:  lblActionItemOnDetails.Visible

3) On your toggle, you can get rid of all the OnCheck and UnCheck stuff...you don't need to be so programmatic. Your new Visible property formulas above will now address the toggle - that is all you need.

That is it!  Set your gallery controls as needed (you don't need to be specific with adding heights and Y values - just place as needed)

Do not put a formula in the TemplateHeight property.  Just set the template height in the designer (size as needed) and leave it.

When controls are visible in the gallery, the gallery will resize.  When not, it will shrink.

I hope this is helpful for you.

[tagustin]

@RandyHayes @BCBuizer 

Thank you both for your advice. I'm sorry for the delay in response. I did jump on this yesterday as much as possible between meetings. Per Randy's advice I inserted a rectangle spacer when nothing else would work. The top screenshot is the app in studio mode. The second screenshot is Play mode. Having the spacer prevents the instructions from overlapping onto the gray spacer bar, but the shape still overlaps so I centered it in such a way as to not cover the check box and view icon. I did have to set a relative Y formula for the spacer as with a static Y, the text was still overlapping onto the gray bar.

I removed the teal action item label as it was redundant to the information in the gray bar (btnOnTask) and set the visibility of all of the labels in the gallery to the Helpful Information label instead. Randy, I like your simplified formulas very much. There is just one little adjustment I am hoping you can help with. If I open a single item and then toggle all to expand and then all to close, the one item that was originally opened stays open rather than closing with all the rest. If I have all items open and click the View icon for an item, the icon changes, but the item won't close OnSelect of the item. The OnSelect of the View icon is currently set to Select(btnOnTask). The Visible property of the Helpful Information label is set to varAccordion = ThisItem.ID || tglExpandOn.Value.

In regards to the overlapping issue, I think I can live with the current results as the text is no longer overlapping onto the gray bar. I wish I could figure out why the rectangle isn't staying within the boundaries of the gallery item, but it may just be one of life's PowerApps mysteries. With the rectangle set to Transparent, users won't know.

Rectangle Spacer Formulas:

Visible:  lblHelpfulInfoOn.Visible
Y: lblDescriptionOn.Y + lblDescriptionOn.Height
OnSelect: Select(btnOnTask)

[RandyHayes]

@tagustin 

Well, to be certain, I reproduced the scenario as close as I could and saw no issue.

I have a gallery and a toggle.  In the gallery I have just two labels.  One is fixed height and the other is autoheight.  Also is a rectangle that bases its position off of the second label position.

Everything expanded as expected. 

Is the above scenario pretty much a good test, or do you feel there is something in yours that is a bit unique?

[tagustin]

@RandyHayes 

Hi Randy,

Thank you for trying to reproduce the flexible height issue. In addition to the 2 labels (Helpful Info/Height & Description/AutoHeight) and rectangle shape you mentioned, My app has the various labels & icon in the gray headerbar/button in addition and the Phase and Link labels in the body. The Phase Label Y is based on the Helpful Info Label Y and the Link Label Y is based off of the Helpful Info Y. The labels and icon in the gray header/button bar have a flat number Y. 

Accordion Behavior Issue

Did you see my questions regarding how to be able to independently operate the sections when the toggle is in play? Another behavior I need to adjust is that I want all of the sections to be closed when the user comes to the screen. That was the behavior I had going before with the more complex formulas. The current OnVisible formula is: Set(varAccordion, 0). What do I need to adjust that? If I try to set it to false it errors out and if I enter the number 1 or -1, it still defaults to having everything open. Let me know if you want me to submit a separate entry for this issue since it really has nothing to do with the original flexible height issue I first submitted. I love your simple approach to formulas, but I also want to be respectful of your time so let me know if it would be easier on you if I just went back to the original formulas I was using.

Thanks again for all of the help Randy! 

Teresa

[tagustin]

@RandyHayes @BCBuizer 

Hello, 

I have family coming in from out of state for a visit and will be taking a break from the computer to visit with them for the next several days so I went ahead and marked BC's post as a solution. I will add that Randy's suggestion of adding a rectangle spacer was necessary in order to prevent the text from overlapping on the gray bar. I don't know why the gallery continues to misbehave in the sense that the rectangle spacer is still overlapping the bar, but it is working well enough for now.

Randy, in my last post I outlined the issues I am having with the accordion action with the simplified formulas so I think I am going to have to revert back to the more complex ones for now since they are producing what I need. I am always eager to learn from you, but I think a separate post when I get back from vacation would be best if you have time. Thank you both so much for your time and support. I really appreciate it! I'm definitely better off now than before you helped me out.

Have a nice weekend,

Teresa

[RandyHayes]

@tagustin 

Yes, enjoy your vacation time and we can circle back on it after that.

In general, the flex height gallery works well as long as you just let it do its thing.  Once you start trying to "help" it with formula on positioning, things start to go bad.

The only time I usually see any real oddity in them is with a nested gallery that is also flex-height.  The rendering of that goes a little screwy.

Anyway...please enjoy your time and weekend!