Modifying CSS of Original Map Viewer Pop-up (Adding Border Radius)

Monithor — Mon, 07 Jul 2025 13:35:29 GMT

Hi everyone,

I’ve been exploring ways to customize the pop-up in the original Map Viewer, specifically trying to apply a border radius to give it a more polished look.

I recently came across [@Brian_McLeer]'s right-click widget (really great work, by the way!), and I was inspired to try running a custom widget in the background to apply some CSS changes. However, I haven’t had any success in modifying the default pop-up’s styles — nothing seems to take effect.

Has anyone managed to apply custom styling to the original pop-up, or found a workaround using custom widgets? Any tips or suggestions would be really appreciated!

Thanks in advance!

Re: Modifying CSS of Original Map Viewer Pop-up (Adding Border Radius)

JeffreyThompson2 — Mon, 07 Jul 2025 14:01:54 GMT

https://developers.arcgis.com/javascript/latest/styling/

The Popup is wrapped in Calcite Components so it will probably not respond to standard CSS targeting. You will need to target it through the Calcite Root.

https://community.esri.com/t5/experience-builder-tips-and-tricks/altering-the-calcite-root/ba-p/1608534

topic Re: Modifying CSS of Original Map Viewer Pop-up (Adding Border Radius) in Experience Builder Custom Widgets

Modifying CSS of Original Map Viewer Pop-up (Adding Border Radius)

Re: Modifying CSS of Original Map Viewer Pop-up (Adding Border Radius)