Modify width of popup - Basic Viewer custom CSS

2786
4
Jump to solution
05-26-2017 08:50 AM
TracySchloss
Frequent Contributor

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. 

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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;}

View solution in original post

4 Replies
KellyHutchins
Esri Frequent Contributor

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;}
MarcGraham2
Occasional Contributor III

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

TracySchloss
Frequent Contributor

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

0 Kudos