Skip to main content

Notifications

Community site session details

Community site session details

Session Id : fJ8yD3aEE1pfcU3vLQa/Cm
Power Apps - Building Power Apps
Unanswered

how to center an app

Like (0) ShareShare
ReportReport
Posted on 30 Jan 2024 00:42:52 by 321

 

Bingqiling_3-1706575296364.png

 

Bingqiling_2-1706575166742.png

Do you know how to center an app?
I created an app with PowerApps, and when I run it on the web or run the app in Teams, the pink area on the right is empty.
So I would like to know how to get the app to move to the center.

Categories:
  • Suggested answer
    Imz4di Profile Picture
    2 on 11 Sep 2024 at 19:16:22
    how to center an app
    I have a workaround for this. Make sure "Scale to fit" is off in the settings.
     
    1. Create a main outer container with the following settings
    * Width: App.Width
    * Height: App.Height
    * Fill: RGBA(0, 0, 0, 0)
    * Drop shadow: None
    * X: 0
    * Y: 0
    * Padding: 0, 0, 0, 0
    2. Create an inner container with the following settings, I'm assume the max with is 1330px, but you can adjust this to your taste. Substitute your inner container name where it says "Inner_Container_Name"
    * Width: If(App.Width > 1330, 1330, Parent.Width)
    * Height: Parent.Height
    * X: (Parent.Width - Inner_Container_Name.Width) / 2
     
    Build your app how you like it in the inner container. This should result in the app centering horizontally on the screen. This works by creating an invisible outer container that takes up the full width of the screen and then the inner container is the preferred width and centered using the formula for X.
  • Robu1 Profile Picture
    1,213 Super User 2025 Season 1 on 30 Jan 2024 at 06:34:11
    Re: how to center an app

    Hi @Bingqiling 

     

    By adjusting the width, height, and positioning properties of the main container or screen, you can center your app both horizontally and vertically within the app viewport. This ensures that your app content is visually centered and aligned, providing a better user experience.

     

     

    There is an existing solution within the power apps community:

    https://powerusers.microsoft.com/t5/Building-Power-Apps/How-do-you-center-a-power-apps-published-app/m-p/491231#M148603

     

     In addition, You can adjust the positioning and size properties of the main container or screen within your app. Here's how:

     

    1. **Select the Main Container or Screen**: In the Power Apps studio, select the main container or screen that contains the elements of your app. This is typically the top-level container or the first screen in your app hierarchy.

     

    2. **Adjust Width and Height**: In the properties pane on the right side of the screen, adjust the Width and Height properties of the selected container or screen. Set the Width to a value that is less than or equal to the width of the app viewport. Similarly, set the Height to a value that is less than or equal to the height of the app viewport.

     

    3. **Center Horizontally**: To center the container or screen horizontally, set the X property to the formula: `(Parent.Width - ThisItem.Width) / 2`. This formula calculates the horizontal position of the container or screen relative to its parent container.

     

    4. **Center Vertically**: To center the container or screen vertically, set the Y property to the formula: `(Parent.Height - ThisItem.Height) / 2`. This formula calculates the vertical position of the container or screen relative to its parent container.

     

    5. **Test and Adjust**: Preview your app to see how it looks and adjust the width, height, and positioning properties as needed to achieve the desired centering effect.

     

    If this post helps you, kindly give a Thumbs Up and if it solved your issue, Accept it as the solution to help the other members find it easily. 

     

     

    Thanks, 

     

    Robu1. 

     

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

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Apps - Building Power Apps

#1
MS.Ragavendar Profile Picture

MS.Ragavendar 20

#2
BCBuizer Profile Picture

BCBuizer 10 Super User 2025 Season 1

#2
LC-26081402-0 Profile Picture

LC-26081402-0 10

Overall leaderboard
Loading started