Display issue for canvas app in iOS

[AlessandroLanna]

Dear Community,

I'm having some troubles in having a canvas app working as expected on a mobile phone.

The app is a canvas, set as "portrait" with the options "Scale to fit", "Keep aspect ratio" and "Lock orientation" all set.

When launching the app in a web browser, all components are shown correctly (I have an horizontal gallery for the 3 labels on top and another horizontal gallery for the 4 buttons on bottom):

Same page on mobile (using iOS Power Apps):

As you can see top and bottom components are now partially visible - it is possible to horizontally scroll to get to the "hidden" items.

Any idea on why there is such behavior and eventually how to solve it?

Thank you!

[iAm_ManCat]

What formula/value are the components using for their Width setting?

And how are the widths of each section calculated in the components?

[AlessandroLanna]

Hi @iAm_ManCat , thanks for your quick response!

I have a total of 4 components in my screen:

Agenda Items_1 has a size of 640x805 (WxH)
Default Information_1 size of 640x75
Detail Menu_1 size of 640x80
Search Component_1 640x80

Lower Menu_1 640x80

In the component view, sizes are:

Agenda Items: 640x640

Default Information: 640x75

Detail Menu: 640x80

Search Component: 640x81

Lower Menu: 640x80

Lower Menu and Detail Menu both have a collection with the following dimensions / formulas:

DetailMenuCollection: 640x76

Items in this collection have a size of 640/3 x 50

LowerMenuCollection: 640x76

Items in this collection have a size of 640/4 x 70

Thanks
Alessandro

[iAm_ManCat · Accepted solution]

Ok, let's start with making the Width values based on the Parent instead of static values:

So, your screen-based components:

Agenda Items_1 has a size of Parent.Widthx805 (WxH)
Default Information_1 size of Parent.Widthx75
Detail Menu_1 size of Parent.Widthx80
Search Component_1 Parent.Widthx80

Lower Menu_1 Parent.Widthx80

In the component view, sizes are:

Agenda Items: Parent.Widthx640

Default Information: Parent.Widthx75

Detail Menu: Parent.Widthx80

Search Component: Parent.Widthx81

Lower Menu: Parent.Widthx80

Lower Menu and Detail Menu both have a collection with the following dimensions / formulas:

DetailMenuCollection: Parent.Widthx76

Items in this collection have a size of Parent.Width/3 x 50

LowerMenuCollection: Parent.Widthx76

Items in this collection have a size of Parent.Width/4 x 70

Could you try that and then test on the mobile once published?

[AlessandroLanna]

Thanks @iAm_ManCat ,

I changed all the values except for:

In the component view, sizes are:

Agenda Items: Parent.Widthx640

Default Information: Parent.Widthx75

Detail Menu: Parent.Widthx80

Search Component: Parent.Widthx81

Lower Menu: Parent.Widthx80

Since "Parent" is not recognized in the component view as an object I can reference to.

I tried again to reload the app now but I still have the same behavior.

One additional thing I noticed is that there is a page which shows correctly on mobile:

Here I currently have an empty gallery and not using the Detail Menu component. Wondering if it's that one causing issues? The lower menu component is shown correctly however only in this screen.

Thanks
Alessandro

[AlessandroLanna · Accepted solution]

I've changed the template size for both the collections - instead of using a calculated value (640/3 and 640/4) I just set a static value of respectively 200 and 150 - now also on mobile it's all shown properly!

Thanks for your support!