Canvas App has extra space bottom and left after publish

[Anonymous]

In power apps studios app looks like this ,

But when it published and run it it looks like this,

I tried changing width and height and app display options and yet no luck, Any idea on how to remove that extra space from left and bottom.

The app display mode is tablet

[CatSchneider]

• Did you leave these settings on? Or did you switch them off so that the app would be responsive to the size of the screen? If you switched these off and did not set the Gallery height and width values dynamically, then that would be why there's extra space when you're on a larger display. 

To fix you can do 1 of 2 things: 

• Flip the toggles in the settings menu to match the above values. 
• Set the gallery width to be App.Width - (2 * Self.X) and the gallery height to be App.Height - (2 * Self.Y)

[Anonymous]

still the left side space remains unchanged.

[CatSchneider]

What is it that you are trying to accomplish? Is it to center the Gallery on the screen? Stretch it to fit with a specific sized margin all the way around? Something else? 

[Anonymous]

i'm trying to make it full screen, make it fit for the whatever the screen size, but it still leaves a space in left side,

[CatSchneider]

Is the Gallery nested within a container, or is it directly on the screen? Is Gallery.X = 0? Are you only wanting to fill the space that's green? 

You could try:

• Gallery.X = 0
• Gallery.Width = App.Width - Self.X
• Gallery. Y = (2 * Button.Y) + Button.Height
• Gallery.Height = App.Height - Self.Y

[Anonymous]

Thanks, setting the width and height and X,Y dynamically did the trick, but it's getting really hard to set the Width,Height and X,Y for every control in every screen. is there any easy way to do that as well ?

[CatSchneider]

100% yes. this is where I'd like to introduce you to vertical (and horizontal, but what you need is vertical) layout containers.

I don't have a blog post written up on this yet, but one will eventually get there.  The important thing here is setting up the values for the container, then placing your controls inside.

1. LayoutJustifyContent = LayoutJustifyContent.SpaceBetween
2. LayoutAlignItems = LayoutAlignItems.Stretch
3. LayoutGap = SpaceBetweenItemsInPixels (I usually choose 20)
4. X = 0
5. Y = 0
6. Width = Parent.Width
7. Height = Parent.Height

I typically then set all my padding values equal to Self.LayoutGap.

Once you place your Button and Gallery Controls in the container, change the AlignInContainer property value of the Button to AlignInContainer.Center

And the Flexible Height properties of the Gallery to be sure they are On

With the padding values set to 0 the controls will stretch to fill in the max available for width and height. Hope this helps! 😊