How to align and set margin for controls inside Vertical container – Power apps canvas apps

I am back with another blog on Power Apps. In today’s blog I will discuss on how you can align controls inside a vertical container in PowerApps. I will concentrate my discussion on how to space out the controls inside the container and set margins for controls.

Let’s start with a very simple example here. I have a vertical container and I have four button controls inside the same.

Unfortunately there is no margin property of controls in PowerApps. There is indeed X and Y property but for controls inside the container, they don’t work.

For example – I have set the Y property of the first button to 200. But as you can see, this has no effect.

Then how do we space out the controls?

Well to start with, every container whether vertical or horizontal has a Gap property which is essentially the spacing between the controls in pixels. As you see in the below screenshot, I have put the layout gap to 20 and essentially there is a gap of 20 pixels in between the controls.

So we have something to space out the controls. But the problem with the Gap property is, it applies to all controls within the container. What if I wanted to have a gap of 30px in between Button3 and Button4. In other words, variable margins between controls in power apps.

Unfortunately, at the time of writing this blog, this is not supported as well. Then how do we achieve it? Let’s see.

I add another vertical container and move the Button4 to the new vertical container.

I set the Y property of the new container to the below formula.

Not a very straight forward way I presume but it works. I hope the concept of margin is introduced soon especially when dealing with containers. But for now, you need to design your layout with multiple container to get the desired result.

Hope this helped. You will also like the below posts.

Debajit Dutta
Business Solutions MVP