Fixing responsiveness issues inside our Canvas App

[johnjohn123]

I have the following Canvas App:-

where i have a main Horizontal container which occupy the whole app , inside the Horizontal container we have 2 vertical containers (the green occupy 1/4 where the other occupy 3/4). inside the second vertical container we have a form and a vertical container which have 2 buttons.

now we are facing these 2 issues:-

1) the Save & Edit buttons are shown under each other while we want them to be beside each other.

2) on small sized screens the form input fields will be trimmed horizontally  (you can not view the end of each field), as follow:-

any advice how to fix those 2 issues?

[ShaheerAhmad]

you have to set the width of the form controls i.e text inputs to response to the space available. 

For example:

Parent.Width*0.8

and set the "X" property of the text inputs to

(Parent.Width-Self.Width)/2

And for the issue with the buttons you can create another container(horizontal)

and move the buttons in the horizontal container.

I hope this helped. please accept it as a solution and be sure to give a thumbs up.

Feel free to ask any further questions.

Visit my blog where i post stuff about Power Platform: shaheer365.blogspot.com 

[johnjohn123]

@ShaheerAhmad using horizontal containers for the buttons worked, thanks

But for the width and height it did not work as the form already showing 2 controls on each horizontal line

[ShaheerAhmad]

you can also change it to 1 text input per row.

if you want two. its gonna be alot more complicated

[johnjohn123]

@ShaheerAhmad the customer wants to have 2 columns of fields