What is the order of control rendering in a canvas app ?

[bouillons]

Hi, I seem to suffer from a strange glitch, where a control is invisible until the screen is resized or until after I move to another screen and come back. I've seen it occasionally on pc in a browser, but never on my android phone, on the other hand, it happens consistently on an iPhone. My suspicion is this might have to do with positioning of the controls. To support responsive design, I'm setting X and Y properties of the controls based on the screen size. Is there a certain order one has to follow to make sure that all controls are correctly sized and positioned before using their properties to position other controls ?

Stephane

[FabianAckeret]

Hi @bouillons 

As long as you don't get any errors when setting your X and Y values, there is no specific order you need to follow.

What I would recommend is to create a label with the X and Y values of that control that disappears. Place it in the middle of the screen and then simply check the value of it once the control disappears. If you get any negative values (e.g. -1000), indeed the control is being out of the screen canvas. Meaning, in your responsive-calculations something is probably wrong.

There is a great article by Microsoft about responsive design with Power Apps. I'd recommend you to read it:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout

If you still need help, let me know the App.Width / App.Height of the screen, as well as the calculations for your responsive control. 

I hope this helps.

Kind regards,

Fabian

[bouillons]

I experience a similar problem with sizing. I have a flexible gallery where the templatesize is the Y of the last label in the item plus the height  of that label. There is only one item in the gallery. I set the layoutminheight and height of the gallery to the same  formula +5 to make sure that the entire record is displayed. When the screen is shown for the first time, the position of the last label seems to be out of sync resulting in a very large gap, only to settle to the correct value when the screen is updated. This behavior only occurs at runtime. When i do it in preview, everything is correct straight away.

[FabianAckeret]

Hi @bouillons 

Instead of setting the TemplateHeight to what you already have, try to set it to a fixed number. E.g. 150. And let the flexible height gallery do the magic. This might solve your problem.

However, when working with flexible height galleries and looking at them in the Power Apps Studio, its normal to see some inconsistencies regarding X/Y values. If you keep pressing the ALT key, it should then show the correct positions as long as you keep this button pressed.

Kind regards,

Fabian

[bouillons]

I'm confused as to the nature of the "magic" of a flexible gallery. The way I understand it is simply that the templateheight can be different for each item, and that you set it with a formula. Making it fixed would defy the purpose no ? I really think this is a bug. Maybe somebody can reproduce it ?

I have 3 flexible gallery's in a vertical container. They each have one item. The formulas for gal1, gal2 and gal3 are:

First Gallery:

Templatesize: gal1LastLabel.Y + gal1LastLabel.Height

Height: gal1LastLabel.Y + gal1LastLabel.Height + 5

LayoutMinHeight: gal1LastLabel.Y + gal1LastLabel.Height + 5

Second Gallery:

Templatesize: gal2LastLabel.Y + gal2LastLabel.Height

Height: gal2LastLabel.Y + gal2LastLabel.Height + 5

LayoutMinHeight: gal2LastLabel.Y + gal2LastLabel.Height + 5

Third gallery:

Templatesize: gal3LastLabel.Y + gal3LastLabel.Height

Height: gal3LastLabel.Y + gal3LastLabel.Height + 5

LayoutMinHeight: gal3LastLabel.Y + gal3LastLabel.Height + 5

The first time the screen is shown the gallery size for the first gallery is too large. There is a large gap between the first gallery and the second gallery.

 

When I go back and reenter the same screen, the total size of the first gallery is correct, and the second gallery fits nicely underneath it.

It happens both in the browser and in the app on smartphone. When I run the app in preview from within the edit session, this behavior does not occur and everything is correct as expected.

Stephane

[FabianAckeret · Accepted solution]

Hi @bouillons 

---

@bouillons wrote:

The way I understand it is simply that the templateheight can be different for each item, and that you set it with a formula. Making it fixed would defy the purpose no ?

---

That's what I thought as well when I first started working with it. However, that's why I was mentioning "let the flexible height gallery do its magic". 

Seting it to a fixed value will make sure the gallery automatically calculates the height based on the visible elements inside the gallery item.

I would recommend you to create a new, EMPTY flexible height gallery to check out the way a flexible gallery works. Add 2-3 labels, just like in the screenshot below. In below example, the gallery templateHeight is set to 215 (NOT calculated!). In Power Apps Studio this will look like this (I hid the labels if they don't contain values)

When I click on the ALT key or simply go to preview (also runtime), the flexible height gallery will calculate the height of each item. I didn't need to calculate anything INSIDE. Compare the following pic with the previous one:

Be careful with Icons/Shapes that you add to the flexible height gallery. They might mess up and break the "magic" of the flexible height.

I hope this clarifies it.

Kind regards,

Fabian

[bouillons]

I do have a few icons in the galleries. That might be the cause then. I still think it's a bug imho.

[bouillons]

I finally used a workaround by using a timer that triggers 500ms after the OnVisible of the screen and that correctly adjusts all the heights. To me, the fact that the behavior is different in the Power Apps Studio than when running the app in the browser or the smartphone app, is a clear indication that there is a bug.

Thanks for your time and effort,

Stephane