How we can make our Power Apps Canvas form to look similar to SharePoint classic UI form (where the label & Input are on the same line and have space between them)

[johnjohn123]

Currently we are redesigning a SharePoint Online classic form to be Power Apps Canvas form. but the client want us to keep the same layout as for the classic SharePoint online form (as much as possible), where the classic SharePoint online form have the following main layout that we want to have inside Power apps form:-

1) The label + the Input are on the same line

2) there is a horizontal space between the label & the input field, as follow:-

now i build a responsive Canvas power apps >> which contain a form, and it looks as follow:-

so how i can make the Power apps form to look similar (as much as possible) to the classic SharePoint form, while keep the power apps form responsive. currently the power apps form and its control have these settings:-

1) As shown in the above picture >> the form is inside a horizontal layout container

2) Each Control has its width = Parent.width , as follow:-

3) Each label has its width = Parent.Width - 60 as follow:-

4) Each Input has its Width = Parent.Width -60

where my Power Apps form is responsive to an acceptable level, so i want to keep the form responsive after applying the needed layout changes (mainly making the label and the input on the same line + add horizontal space between the label and the input) ,, can anyone advice how to achieve this ?

Thanks

[BCBuizer · Accepted solution]

Hi @johnjohn123 ,

Changing the form's Layout property to Horizontal will align the label and input controls. 

With a horizontal layout, the width of the label and input controls is determined by a ratio, for instance:

Label.Width = (Parent.Width - 60) * 0.4
Input.Width = (Parent.Width - 60) * 0.6

By playing around with the 0.4 and 0.6 values, you can make the Label wider/narrower which in turn decreases/increases the white space between the two. As long as they both sum up to 1, your form will look fine.

For instance in the below I set a 0.3 / 0.7 ratio for the top datacard and 0.6 / 0.4 for the lower 3: