cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Poweruser1101
Helper I
Helper I

Issue while creating responsive canvas apps which is embedded in a model driven app

Hi All,

 

I am new to canvas apps. recently i have been working on embedding a canvas app in a model driven app.

I want the canvas app to be responsive based on the browser size, however it does not work.

Below is the design i am trying to make responsive.

(Screenshot from power apps editor)

 

Poweruser1101_0-1606818215628.png

Screenshot form Model Driven app -

Poweruser1101_1-1606818378863.png

However when i change the window size, the fields re-arrange themselves in totally haphazard manner

 

Poweruser1101_2-1606818615388.png

Below are the formulas i have applied -

Screen width = Max(App.Width,App.DesignWidth)

Screen Height = Max(App.Height,App.DesignHeight)

 

Placed a Edit Form

width = Parent.width

Height = Parent.height

 

Placed 8 datacards in each row on the form (as shown in above screenshot) -

 

1st Datacard

X=0 , Y = 0

Width = Parent.Width / 5

 

Remaining Datacard

Width = (Parent.Width - Width of 1st Datacard)/7

X= X Position of 1st Datacard + Width of 1st Datacard

Y = Y Position of 1st Datacard

Height = Height of 1st Datacard

 

When resizing the window, the fields do not maintain the position. Please suggest what is wrong with my approach. I have also disabled the Scale to Fit option.

 

1 ACCEPTED SOLUTION

Accepted Solutions
Poweruser1101
Helper I
Helper I

Hello all,

 

Posting the solution to my above asked question so that it will help others.

In order to make my embedded canvas app responsive i  applied the below formula - 

Since i had 8 fields (Datacards) in each row -

Width of Datacards = Parent.width/10

I divided the entire width by 10 because , after all the datacards are placed in a single row, there is some space still left on the row. Now to cover that remaining space set the widthfit as true.

 

If i divide the parent.width by 8 it occupies all the width present in the row and hence snaps to the below row if the control does not get enough space.

 

X Value of the controls in the first row were set as 0, 1, 2, 3, 4, 5, 6, 7

Y Value of the controls in the first row were set as 0 for all 

 

Now the design is working fine. 

Points to be noted -

1) Always leave some space on the row after setting the width of the controls, this will help if the controls are placed in a smaller sized screen

2) X and Y values needs to be maintained based on row and column in order to avoid snapping of the controls to below row

 

 

View solution in original post

1 REPLY 1
Poweruser1101
Helper I
Helper I

Hello all,

 

Posting the solution to my above asked question so that it will help others.

In order to make my embedded canvas app responsive i  applied the below formula - 

Since i had 8 fields (Datacards) in each row -

Width of Datacards = Parent.width/10

I divided the entire width by 10 because , after all the datacards are placed in a single row, there is some space still left on the row. Now to cover that remaining space set the widthfit as true.

 

If i divide the parent.width by 8 it occupies all the width present in the row and hence snaps to the below row if the control does not get enough space.

 

X Value of the controls in the first row were set as 0, 1, 2, 3, 4, 5, 6, 7

Y Value of the controls in the first row were set as 0 for all 

 

Now the design is working fine. 

Points to be noted -

1) Always leave some space on the row after setting the width of the controls, this will help if the controls are placed in a smaller sized screen

2) X and Y values needs to be maintained based on row and column in order to avoid snapping of the controls to below row

 

 

View solution in original post

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

secondImage

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Top Solution Authors
Top Kudoed Authors
Users online (45,900)