Image widget: tablet and mobile "fill" settings only top-align, not center

576
7
Jump to solution
07-05-2022 03:51 PM
MackenzieCope
New Contributor III

Hello! 

I am building an app using experience builder and have come across an issue only in tablet and mobile screen sizes. I have an image widget that populates with the attachments from my map data. The image size is fixed, so I have the "fill" setting on so the attached images fill the space. On desktop, the images vertically align center, which is what I want. For whatever reason, on tablet- and mobile-size screens, the images are top-aligned in the image widget. I can't find a vertical alignment setting for the image, only a horizontal alignment setting for the whole widget, not the image that populates it. 

Current image widget settings: 

MackenzieCope_0-1657061031744.pngMackenzieCope_1-1657061051264.png

Desktop vs Tablet image output: 

MackenzieCope_2-1657061118168.png   MackenzieCope_3-1657061166357.png

Has anyone else run into this and have ideas? I really don't want to go through all my data attachments and have to resize them manually. I would just like the "fill" setting to fill the widget but align center. Thanks!

1 Solution

Accepted Solutions
TonghuiMing
Esri Regular Contributor

@MackenzieCope There has been a known limitation for the image 'fill' behavior on iOS/macOS devices (mostly Safari) for a while, due to the browser's rendering mechanism limit, and unfortunately we have no good ways to solve it at this time. On Android tablets, they look as expected, such as with a Galaxy. 

 

Based on your description, it looks like the same issue. If not, could you provide the mode/version information of your devices?

View solution in original post

0 Kudos
7 Replies
TonghuiMing
Esri Regular Contributor

@MackenzieCope There has been a known limitation for the image 'fill' behavior on iOS/macOS devices (mostly Safari) for a while, due to the browser's rendering mechanism limit, and unfortunately we have no good ways to solve it at this time. On Android tablets, they look as expected, such as with a Galaxy. 

 

Based on your description, it looks like the same issue. If not, could you provide the mode/version information of your devices?

0 Kudos
JoelMcKechnie
New Contributor III

Hi @TonghuiMing, I'm coming up against this as well. Using Macbook Pro and Safari (latest OS and browser). Any ETA for a fix?

TonghuiMing
Esri Regular Contributor

Hi @JoelMcKechnie - this has been logged in our official document as a known limitation:

https://doc.arcgis.com/en/experience-builder/latest/configure-widgets/image-widget.htm

Unfortunately, we do not have a planned fix unless the Safari browser changes its rendering mechanism.

JoelMcKechnie
New Contributor III

That's disappointing - I hope Apple catch this issue. Thanks for the quick response!

erica_poisson
Occasional Contributor III
0 Kudos
TonghuiMing
Esri Regular Contributor

Hi @erica_poisson - that seems to be the cause.

0 Kudos
MackenzieCope
New Contributor III

Hi @TonghuiMing,

I just went back and tested with Android devices and the images load correctly. Looks like this is the same issue and limitation as you described. I appreciate the response, I will use the "fit" setting on tablet and mobile or find another workaround. 

Thank you!