how to center an app

Like (0) Share

Report

Posted on 30 Jan 2024 00:42:52 by Bingqiling

321

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:

General Questions

All responses (2)

Answers (0)

Suggested answer

Imz4di 2 on 11 Sep 2024 at 19:16:22

Like (0)

Report

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 1,233 Super User 2025 Season 1 on 30 Jan 2024 at 06:34:11

Like (0)

Report

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.