Share via

Responsive Power Apps

Marta Peixoto 0 Reputation points
2025-09-17T10:14:30.4133333+00:00

I have a Power App that currently takes up the entire screen, and I want the elements of my app not to lose their formatting when the browser size changes.

I have a main container that fills the entire screen. Inside it, I have three more containers: one for the header, one for the body, and the last one for the footer.

My current problem is that I have a submenu that drops down from the header, but since I have the body container placed right after the header container, this submenu does not appear.

Can anyone help me?

Thank you.

Developer technologies | Small BASIC
Developer technologies | Small BASIC
A programming language created by Microsoft that serves a stepping stone for beginners from block-based coding languages to more complex text-based languages.
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Danny Nguyen (WICLOUD CORPORATION) 3,500 Reputation points Microsoft External Staff
    2025-09-18T05:18:54.6433333+00:00

    Hi @Marta Peixoto ,

    Thanks for sharing the details.

    It sounds like the submenu is being clipped because the body container is directly beneath the header container. In Power Apps, containers are stacked and each has its own layout rules, so a dropdown that extends outside of its parent container will often get hidden.

    Here’s what you can try to make your app responsive and ensure your submenu appears correctly:

    1. Disable 'Scale to Fit' Setting: Go to your app settings and make sure the 'Scale to fit' option is disabled. This setting can cause the layout to misalign when resizing the browser window. You can find it under Settings > Display.
    2. Use Responsive Containers: Ensure that you're using containers to manage your layout. Containers can help automatically adjust the positioning of their child elements based on screen size changes. You might want to consider a vertical container for your main structure (header, body, footer) to help with responsiveness.
    3. Adjust the Z-Index: Sometimes, submenus can be hidden behind other elements. You can set the Z-index of your submenu to ensure it appears on top of other containers. This can usually be done in the properties panel when you select the submenu.
    4. Dynamic Positioning (Optional): Instead of using fixed positions for your containers, use formulas that reference the screen size or window dimensions to dynamically place your submenu. For example, you might want to adjust the 'Y' property of your submenu based on the height of the header.

    Here’s a resource that details how to build responsive apps and how to utilize containers effectively: Building responsive canvas apps.

    Give these adjustments a try and see if they help.

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.