In Map Viewer, the spacing between images displayed in pop-ups is excessively wide, resulting in a poor visual layout. Additionally, there are no configuration options available for users to adjust image margins or control spacing, limiting customization and usability.

Solution de contournement

When adding multiple images to a pop-up in ArcGIS Online’s Map Viewer using the Add Content option, users may encounter excessive blank space between images. This affects visual clarity, especially when trying to stack multiple images vertically in a clean layout.

Testing/investigation

• Used Arcade to adjust image positioning.
• Removed <br> tags, which slightly improved spacing (e.g., scroll bar disappeared).
• Confirmed the images themselves were properly cropped, excess space was not from the source images.

Arcade expression used:

//function to place image to side of text

function buildbox(imageURL){

 return '<figure class="table"><table style="width:100%"><tbody><tr><td style="width:100%; text-align:center; vertical-align:middle;"><img src="' + imageURL + '" />' + '</td></tr></tbody></table></figure>'

}

function buildbox2(imageURL2){

return '<figure class="table"><table style="width:100%"><tbody><tr><td style="width:100%; text-align:center; vertical-align:middle;"><img src="' + imageURL2 + '" />' + '</td></tr></tbody></table></figure>'

}

var ViewLocsIMG = "https://live.staticflickr.com/65535/54625405422_6ac36b901e_m.jpg"

var ContactsIMG = "https://live.staticflickr.com/65535/54625405237_8b7b55292c_m.jpg"

var OfficeIMG = "https://live.staticflickr.com/65535/54625031213_ab19f0ceed_m.jpg"

var LogoIMG = "' " + $feature.Images + "'"

var textstring = '<span style="font-size:18px;">' + $feature.PRJDesc + '<br>' +

 '<a href="' + $feature.ViewsURL + '">' + buildbox(ViewLocsIMG) + '</a>' + "<br>" +

 '<a href="' + $feature.ContactURL + '">' + buildbox(ContactsIMG) + '</a>' + "<br>" +

 '<a href="' + $feature.OfficialURL + '">' + buildbox(OfficeIMG) + '</a>' + "<br>" + buildbox2($feature.Images) + '<br></span>'

return {

 type : 'text',

 text : textstring

}

Result:

Étapes pour reproduire