nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Image position not honored in tablet or mobile design

erica_poisson

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:

Find more posts tagged with

ArcGIS Online

Accepted answers

TonghuiMing

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!

TonghuiMing

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

All comments

ctalleygreenville

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

TonghuiMing

ctalleygreenville

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,

ChipMorgan65

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

TonghuiMing

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.

ChipMorgan65

@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

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

erica_poisson

That does not make any difference unfortunately.

AllanHird

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.