cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
bouillons
Resolver I
Resolver I

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

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

1 ACCEPTED SOLUTION

Accepted Solutions
FabianAckeret
Super User
Super User

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)

 

FabianAckeret_0-1620284538127.png

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:

FabianAckeret_1-1620285739920.png

 

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


Please click Accept as Solution if my post answered your question. Like my answer? Consider giving it a Thumbs Up. Others seeking the same answers will be happy you did.

View solution in original post

7 REPLIES 7
FabianAckeret
Super User
Super User

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


Please click Accept as Solution if my post answered your question. Like my answer? Consider giving it a Thumbs Up. Others seeking the same answers will be happy you did.
bouillons
Resolver I
Resolver I

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
Super User
Super User

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


Please click Accept as Solution if my post answered your question. Like my answer? Consider giving it a Thumbs Up. Others seeking the same answers will be happy you did.
bouillons
Resolver I
Resolver I

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.

bouillons_0-1620280191470.png 

bouillons_1-1620280462450.png

 

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.

 

bouillons_3-1620281172383.png

 

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
Super User
Super User

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)

 

FabianAckeret_0-1620284538127.png

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:

FabianAckeret_1-1620285739920.png

 

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


Please click Accept as Solution if my post answered your question. Like my answer? Consider giving it a Thumbs Up. Others seeking the same answers will be happy you did.

View solution in original post

bouillons
Resolver I
Resolver I

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

bouillons
Resolver I
Resolver I

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

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (4,070)