Image position not honored in tablet or mobile design

801
9
Jump to solution
05-19-2023 12:04 PM
Labels (1)
erica_poisson
Occasional Contributor III

Hi - 

I am designing the tablet and mobile layouts for my Experience. In all of my designs, I am using the same background image for my apps home page. I've got the image position set to "fill" and this is honored within the Experience designer, however when I view the published version on my tablet and mobile device, this is no longer honored. On my iPhone, I have tested this in both Safari and Chrome with the same results. 

Please see both sets of examples below. 

Is this expected behavior? Any ideas to make this work as shown in the designer?

Thank you!

Mobile preview in designer:

erica_poisson_0-1684522898015.png

Published mobile version on iPhone:

erica_poisson_1-1684522931739.jpeg

 

Tablet preview in designer:

erica_poisson_2-1684522985771.png

 

Published tablet version on iPad:

erica_poisson_3-1684523006077.jpeg

 

Erica
2 Solutions

Accepted Solutions
TonghuiMing
Esri Regular Contributor

@erica_poisson Erica, unfortunately it looks like the same known limitation mentioned here as well as documented in our doc site - https://community.esri.com/t5/arcgis-experience-builder-questions/image-widget-tablet-and-mobile-quo... 

Avoid using iOS or MacOS tablets, you will see the expected behavior.

View solution in original post

TonghuiMing
Esri Regular Contributor

The iOS limit of "Fill" has been resolved with the latest AGOL October release, so cases with iPhones or iPads, or macOS browsers should work fine now. Let me know if you encounter any other issues. Thanks!

View solution in original post

9 Replies
AllanHird
New Contributor II

Have you tried the "stretch" or "fit" option in the image widget's settings?
Sometimes it is useful to create a "fixed Panel" and put your image inside, with max width max height, so the fixed panel resizes correctly and so does the image within it. 

0 Kudos
erica_poisson
Occasional Contributor III

That does not make any difference unfortunately. 

Erica
0 Kudos
TonghuiMing
Esri Regular Contributor

@erica_poisson Erica, unfortunately it looks like the same known limitation mentioned here as well as documented in our doc site - https://community.esri.com/t5/arcgis-experience-builder-questions/image-widget-tablet-and-mobile-quo... 

Avoid using iOS or MacOS tablets, you will see the expected behavior.

ChipMorgan65
Occasional Contributor

@TonghuiMing We do not have the luxury of avoiding iPhones, iPads, and Mac devices as we’re building public facing applications. It would be supremely useful if your team could develop a workaround that allows acceptable image display on Apple products. 

TonghuiMing
Esri Regular Contributor

Hi @ChipMorgan65 

We are troubled by this issue as well and are continuing to find a solution to work around that browser limit. Thanks for bringing it up. Keep tuned.

0 Kudos
ChipMorgan65
Occasional Contributor

We appreciate that you're continuing to look at it. 

ctalleygreenville
New Contributor III

Hi,

Besides the "fit" setting for the image (which doesn't really work for my situation), is there a running list somewhere with "situations" and then possible workarounds for that situation regarding the image problem with iOS devices?  I'm seeing this with Chrome, too.

For my app, it appears most often when I am using the Section widget.  It doesn't matter what setting I use, the images still cut-off with the basic Section widget on an iOS device (Chrome or Safari).  I am trying someone else's suggestion of adding a column to the section to contain the image and then tinkering with all the options.

In another situation, it seems that I had to set the height in pixels in the image setting to equal the height in pixels of the image itself.  But that fix won't really work with the Section widget.

If it makes everything easier to resize the image, it would be nice to have known that information upfront vs. after a lot of work.  The "known issue" on the image widget help should be moved up to the top of the help page and WAYYYY more obvious!  Especially since the Live views with multiple sizes do not show the problem.  

It all works perfectly on Android devices just as others have said.  

Thanks,

 

 

0 Kudos
TonghuiMing
Esri Regular Contributor

The iOS limit of "Fill" has been resolved with the latest AGOL October release, so cases with iPhones or iPads, or macOS browsers should work fine now. Let me know if you encounter any other issues. Thanks!

CarmenDurham
Occasional Contributor II

Thank you for the update.  I'll take a look.

 

0 Kudos