topic Re: Image position not honored in tablet or mobile design in ArcGIS Experience Builder Questions

Image position not honored in tablet or mobile design

erica_poisson — Fri, 19 May 2023 19:09:34 GMT

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:

Published mobile version on iPhone:

Tablet preview in designer:

Published tablet version on iPad:

Re: Image position not honored in tablet or mobile design

AllanHird — Mon, 22 May 2023 10:18:36 GMT

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.

Re: Image position not honored in tablet or mobile design

erica_poisson — Mon, 22 May 2023 12:41:40 GMT

That does not make any difference unfortunately.

Re: Image position not honored in tablet or mobile design

TonghuiMing — Tue, 23 May 2023 02:45:02 GMT

@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-quot-fill-quot/m-p/1253664/highlight/true#M6141

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

Re: Image position not honored in tablet or mobile design

ChipMorgan65 — Mon, 28 Aug 2023 21:09:55 GMT

@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.

Re: Image position not honored in tablet or mobile design

TonghuiMing — Tue, 29 Aug 2023 02:36:38 GMT

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.

Re: Image position not honored in tablet or mobile design

ChipMorgan65 — Wed, 30 Aug 2023 21:05:40 GMT

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

Re: Image position not honored in tablet or mobile design

ctalleygreenville — Thu, 12 Oct 2023 18:03:02 GMT

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,

Re: Image position not honored in tablet or mobile design

TonghuiMing — Fri, 27 Oct 2023 06:48:13 GMT

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!

Re: Image position not honored in tablet or mobile design

CarmenDurham — Fri, 27 Oct 2023 12:43:07 GMT

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