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

Embedded Canvas App (Dynamics) Whitespace & scaling issues

Hi,

 

- Embedded Canvas App in Dynamics on Quote entity

- There is a lot of whitespace below the app

- App Settings: (unfortunately in german because I didn't figure out yet how to set the language to english)

image.png

 

- How it looks in the system. Watch teh scrollbar of the browser to see that there is a lot of whitespace.

image.png

 

- Settings on the Quote Form:

- "Hide Default Control: True"

- One Column Tab, One Column Section

 

 

- Issue now is that when the browser gets bigger, the App will not fit on the screen anymore because it expands using the whitespace below

- You cannot see the "Add to Quote" Button anymore:

image.png

 

What I want:

- I would like my app to scale in regards to screensize, but only to the maximum that it still fits on the page.

- I assume that the settings are correct in general and that the app only expands beyong the screen because of the whitespace

 

 

Thanks 🙂

 

 

 

8 REPLIES 8
Highlighted
Helper I
Helper I

Push 🙂

Highlighted

Hi, can you did a quick test for me? Embed another app (dont worry you can always add the App ID of this app to the form later) and see if you still see the scroll bar. Add a form to this app and add as many fields as you want to test the scrolling issue.

Let me know your findings.

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Hardit Bhatia
The Power Addict
https://thepoweraddict.com
Highlighted

Hi,

I am not sure that i fully understood you.

 

I did the following: I added another embedded Canvas App on the same Form on the same tab.

Lets call this App "App 2".

When App 2 is below App 1 the whitespace is between those 2 apps, so it seems the whitespace is introduced by App 1. 

 

If I add regular Dynamics fields between the apps, it is basically the same behavior, the field is below the whitespace of App 1.

 

I created a new Tab and added my initial App in my DEV environment and added the app there again and this Tab doesn't have the issue?

But even this tab has the issue that it sizes bigger than the browser when its big. 

I feel that it gets bigger than the browser, when the App tries to keep its relative ratio of 16:9. 

So it always uses full Width of the Window and then Scales the height accordingly to 16:9.

 

I tried experimenting with App.DesignWidth/Height App.Width/Height or Screen1.Size etc. 

And also tried changing the Height and Width parameter of the Screen but it seems that this is overwritten by the App settings...

 

Am a little clueless...

 

Highlighted

Did you try adding a new app on a new tab?
Highlighted

Yes. No whitespace for that App it seems. 
Also adding my App to a new Tab didnt give whitespace ONE time. Then I did it a second time and there is whitespace again?

 

But even on the Tab where there was no Whitespace my App scaled too much and wasnt fully visible. So I assume it is not a whitespace issue. 

I think it has to do with the way it resizes the 16:9 format. It takes whole Screen Width and then adjusts the height pixels to be correct 16:9 format. But it doesn't check that the height is bigger than the "max size without a scrollbar".

Highlighted

So its 2 things is what I have found out: first is sometimes the app (and I have a couple of theories for this) adds white space at the bottom AND 16:9 isnt a good ratio to see the entire app without scrolling the screen. I normally adjust the height of the screen to a lower value which helps in avoiding the user to scroll to get to a button that might be at the bottom of the screen.

Let me know if this helps.

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Hardit Bhatia
https://thepoweraddict.com
Highlighted

What ratio would you suggest for an embedded app?

 

I actually feel that 16:9 fits quite good.

 

What I want is basically: Autosize On, Ratio Fix, but MAX width = XXXX pixels.

But when I change the Width function of the Screen it seems it is overwritten.

Highlighted

I have used 1366 by 600 and it works well without having a scroll bar on the screen.

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (10,533)