Add left margin to child elements within vertical container

(0) Share

Report

Posted on by 290ch

Hello.

Is there a way to change the x axis value of certain child elements within vertical container?

I have a canvas app where I have series of question and text input laid out vertically. I want to put left margin on just the text inputs.

I want the effect of the second text input in this image, but I can only achieve it if I insert additional container around the text input and change the X value within there.

Is this the proper way to do it? Do I really need a container for every single text input just to have a left margin?

Thank you in advance.

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (1)

Sort by

SBax 1,348 on at

Like (0)

Report
Copy link

Link copied!

Adjust the "padding left" property of your controls

This article explains padding in more detail

I quite often add a container within my containers that is 10 smaller than my actual container, which gives a margin around it

In theory, either will work, just depends on the requirement

Was this reply helpful? Yes No
290ch 7 on at

Like (0)

Report
Copy link

Link copied!

Thank you SBax.
My understanding is that padding left on the text input will only affect the text inside the input, and not the text input box itself.
Are you saying that I need that additional container around the text input (just like i have in the image attached) and set a padding on that? So essentially we need container for every single text input?

Was this reply helpful? Yes No
SBax 1,348 on at

Like (1)

Report
Copy link

Link copied!

For text input, I believe you are correct!

I'm not at my desk at the moment, but when I am at home (around 30 mins time) I'll do you some screenshots of how I would tackle this

Good news is, the way I have in mind does NOT require a container for each control

Was this reply helpful? Yes No
Verified answer

SBax 1,348 on at

Like (0)

Report
Copy link

Link copied!

Hi again,

Here is how I would tackle this

Horizontal container

wrap property set to true

text label of the appropriate width (e.g. Parent.Width)

rectangle with width set to the the margin width you require (e.g. 10)

text input of width textlabel.Width - rectangle.Width

the end result looks like this:

I have left the rectangle as blue to give you a clear understanding of what we have done, but you would set the fill on this to RGBA(255,255,255,0)

If this is something you are using a multiple times in your app, you could always explore a component instead, with an ouput property equalling the value of the text input

hope this helps!

Was this reply helpful? Yes No
290ch 7 on at

Like (0)

Report
Copy link

Link copied!

Thank you SBax, that is a much cleaner approach than messing with the x value.
Will accept this as a solution.

Was this reply helpful? Yes No