What are the options to get a bigger popup?

[MathiasDahl]

Hi, we're currently migrating over a big application over to the 4.X version of the JavaScript API. Previously we embedded the app in a desktop .NET application. We could then combine web technology with Window Forms. For example, when clicking an object on the map, we could bring up a quite large information window with a lot of information about the clicked object (some of which does not come from the feature service).

Now that we try to migrate to 4.X we will also leave the .NET world and solely rely on the browser. The old "popup" we used cannot be used so we are trying out the standard popup, or popuptemplate functionality. It works nicely and looks nice, but the one problem we see is that the size of the popup is very small in relation to the amount of data that we want to show. We have looked around and there seems to be no way that we can make the popup bigger more than to dock it, and even then it is too narrow (the height is okay). One thing that complicates things is that the application is very configurable. So, different customers will have different feature layers with different amount of columns and data. If we designed this for one particular scenario we could probably work something out, but we are trying to get something very generic here.

We wonder what our options are now, to get a bigger popup? We would like to stay in the "standard track" as much as we can. Can we tweak the CSS perhaps? Should/can we extend Esri's popup class? Should we make our own class or widget that is bigger (and have to do a lot of work ourselves with zoom, Next/Prev and all that)? Can we expect enhancements to be done to the popup class such that we can control the size better? Etc.

All ideas are welcome.

Thanks!

/Mathias

[RobertScheitlin__GISP]

Mathias,

  As far as docking there is the popups dockOption tht allows to to specify height and width:

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#dockOptions 

In the 4.x API the popups width and height are controlled by css rules based on the views size. So to change this you have to override those css rules. Here is an example based on a views size:

.esri-view-height-less-than-medium .esri-popup__main-container {
    max-height: 200px;
}
.esri-view-width-medium .esri-popup__main-container {
    width: 340px;
}‍‍‍‍‍‍

Notice the rule name "esri-view-height-less-than-medium" to is rule will only be used when the view is in the less than medium range. You can play around with the views size and then inspect the popup containers applied css rule so you can copy that rules name and adjust its values.

[MathiasDahl]

Thanks, Robert!

I read about the dock options before, and in a way, it could be used to make the problem smaller (by always dock the dialog, for example, it would always be bigger than the "small" floating version). The CSS information seems very interesting - we will try that out and report back.

Again, thanks!

/Mathias