cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AlessandroLanna
Frequent Visitor

Display issue for canvas app in iOS

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):

web_agenda.png

 

Same page on mobile (using iOS Power Apps):

MicrosoftTeams-image (7).png

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!

2 ACCEPTED SOLUTIONS

Accepted Solutions
iAm_ManCat
Super User
Super User

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?

 

@iAm_ManCat


Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


View solution in original post

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!

View solution in original post

5 REPLIES 5
iAm_ManCat
Super User
Super User

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

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

@iAm_ManCat


Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


Hi @iAm_ManCat , thanks for your quick response!

I have a total of 4 components in my screen:

AlessandroLanna_0-1670324574739.png

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
Super User
Super User

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?

 

@iAm_ManCat


Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


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:

AlessandroLanna_0-1670327545245.png

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

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!

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (3,191)