Answered

Background Color Change outside of Canvas app 16:9

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

How do I adjust the background outside the canvas app at 16:9? My monitor is 1920 & up to 3840. But since the Canvas app is 16:9, there is this grey background bordering the rest of the canvas. I would like to adjust that color to blend into our app so it looks visually cleaner.

Thanks!

Categories:

Building Power Apps

All responses (8)

Answers (1)

Sort by

RezaDorrani 12,145 on at

Like
a
(1)

Report
Copy link

Link copied!

Hi @Anonymous

I dont believe there is a way to change that background color (assuming u r talking about below section)

--------------------------------------------------------------------------------
If this post helps answer your question, please click on “Accept as Solution” to help other members find it more quickly. If you thought this post was helpful, please give it a Thumbs Up.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

@RezaDorrani thanks for the quick reply. That is correct, that is what im trying to change 🙂
RezaDorrani 12,145 on at

Like
a
(2)

Report
Copy link

Link copied!

@Anonymous

As far as I know it cannot be changed
Lets confirm with @Pstork1 as well

--------------------------------------------------------------------------------
If this post helps answer your question, please click on “Accept as Solution” to help other members find it more quickly. If you thought this post was helpful, please give it a Thumbs Up.
Pstork1 69,661 Most Valuable Professional on at

Like
a
(2)

Report
Copy link

Link copied!

@RezaDorrani is right. There is no way to change that background. However, if you turn off Scale to Fit in the App settings you can resize your screen programmatically to fill up the whole screen. Take a look at this article on responsive layouts. YOu don't have to implement everything, but by turning off a couple switches and modifying your X, Y, Height, and Width of specific controls and Forms you can dynamically reformat you app to fit the whole screen.

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout
v-monli-msft Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Anonymous ,

Since this cannot be achieve directly so far, consider to add an idea in below forum:

https://powerusers.microsoft.com/t5/PowerApps-Ideas/idb-p/PowerAppsIdeas

Regards,

Mona
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

@Pstork1 , thanks for your reply, that was helpful. I have been reading up more on the responsive layout. Had a few questions regarding the definition of responsive as PowerApps sees it as it relates to eliminating that background color and filling the whole width of the browser.

Say we follow a standard 960 grid https://960.gs/ for simplicity purposes. If that was the "width" of our app, but the browser window is 1920x1080. Is there a way to "center" everything in the 960 content area and then have it bleed out so the rest is "white space" (or whatever color we use) to keep the content centered vs left aligned and then we control the bleed out?

By example:
Microsoft.com or Airbnb.com is roughly 1600px wide and then everything else is white space
Uber.com is roughly 1200px wide and then stuff bleeds out to white from there.

My goal is to make sure in PowerApps responsive canvas that we can set the "max width" of a container, otherwise you could have a table stretching the full width of the browser window if our users end up on the 4K monitor it would make stuff look weird being stretched the full width.

To do this in standard CSS, its pretty straight forward, I wanted to understand further how flexible PowerApps is as I know the responsive part of Canvas apps is a bit new.

Not sure if you or others have any demos showing off various responsive apps that test the full potential of what the product can do today.

Thanks for your help!
Verified answer

Pstork1 69,661 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!
Configure the app the way the article describes and set the backgroundimage of the screen to a color. That will fill the entire design surface if you turn off scaling.

Set a variable for your desired maxHeight and maxWidth when the app starts.

Adjust the X and Y for all the container elements on the screen, like forms or galleries. Other controls will need to be handled separately. For example

If(Screen1.Width > MaxWidth,(Screen1.Width - MaxWidth)/2+(MaxWidth-Form1.Width)/2,0)

Set the Screen Fill to the color you want for a background color.That will fill the full device screen.

It isn't quite as straightforward as CSS, but is similar.
Pstork1 69,661 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

Since the Screen controls always have an X,Y of 0,0 which can't be changed. The screen normally covers the whole background if you turn off autoscaling. Then you center Forms, galleries, or control placement on the Screen. So changing the screen background will change that section.