topic Re: Modify width of popup - Basic Viewer custom CSS in ArcGIS Online Questions

Modify width of popup - Basic Viewer custom CSS

TracySchloss — Fri, 26 May 2017 15:50:26 GMT

In the Basic Viewer template, I see that I can include custom css to modify the style of various elements. My popup is a little too narrow for its content, and if it was just a bit wider, I hope to avoid a scrollbar from left to right.

I've tried to determine what the particular style is to modify, but popups are always tricky because they are so many small elements, nested within one another.

I see there is a class esriPopup light esriPopupVisible, but that seems to manage the placement of the entire tag within the map. The next div within it is has the class esriPopupWrapper, then a size, sizer content, then contentPane.

I've been able to make the contentPane be larger, but that only takes care of that one part of the tag, not the entire thing.

Which element should I be trying to style?

Also:

How closely do these style names align with the styles in the JavaScript API? I'm much more familiar with it, but our organization is moving toward AGOL, and I need to learn what I may or may not be able to customized in that environment.

Re: Modify width of popup - Basic Viewer custom CSS

KellyHutchins — Fri, 26 May 2017 17:09:23 GMT

Tracy

You are right modifying the popup via css is always tricky because of all the parts. The easiest way to change the popup size is to use the resize method in JavaScript but I get that you want to make the modification without downloading and hosting the app.

Try modifying the width of the sizer. I tested this out a bit and it seemed to work ok. Oh and we have a new place called ArcGIS Configurable Apps‌ that is setup to be a location where you can see what's new in Configurable Apps and get questions answered if you want to check it out.

.esriPopup .sizer{ width:400px !important;}‍‍

Re: Modify width of popup - Basic Viewer custom CSS

TracySchloss — Fri, 26 May 2017 18:08:31 GMT

That was it! I think I might have tried that one, but I didn't include !important.

Re: Modify width of popup - Basic Viewer custom CSS

Marc_Graham — Thu, 18 Oct 2018 00:52:05 GMT

Hi there, is there a similar method for resizing the popup panel for the minimalist app? https://www.arcgis.com/home/item.html?id=50aaf4ec408f4675bc9f30e68441e8f8

Regards,

Marc

Re: Modify width of popup - Basic Viewer custom CSS

KellyHutchins — Thu, 01 Nov 2018 16:21:52 GMT

Yes you can use the exact same approach with Minimalist. The config panel has an option for entering custom css.