Skip to main content
Community site session details

Community site session details

Session Id : GTa+FuAJ8RkKCigwKHEVow
Power Apps - Building Power Apps
Answered

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

Like (0) ShareShare
ReportReport
Posted on 1 May 2021 13:17:33 by 302

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

Categories:
  • bouillons Profile Picture
    302 on 06 May 2021 at 15:17:53
    Re: What is the order of control rendering in a canvas app ?

    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

  • bouillons Profile Picture
    302 on 06 May 2021 at 13:22:46
    Re: What is the order of control rendering in a canvas app ?

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

  • Verified answer
    FabianAckeret Profile Picture
    969 on 06 May 2021 at 07:26:51
    Re: What is the order of control rendering in a canvas app ?

    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

  • bouillons Profile Picture
    302 on 06 May 2021 at 06:09:16
    Re: What is the order of control rendering in a canvas app ?

    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 Profile Picture
    969 on 05 May 2021 at 22:13:51
    Re: What is the order of control rendering in a canvas app ?

    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 Profile Picture
    302 on 05 May 2021 at 18:47:53
    Re: What is the order of control rendering in a canvas app ?

    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 Profile Picture
    969 on 02 May 2021 at 11:01:38
    Re: What is the order of control rendering in a canvas app ?

    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing our 2025 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for…

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 791 Most Valuable Professional

#2
MS.Ragavendar Profile Picture

MS.Ragavendar 410 Super User 2025 Season 2

#3
mmbr1606 Profile Picture

mmbr1606 275 Super User 2025 Season 2

Loading complete