Configure Popup to have HTML/CSS items Side by Side

emoreno

Hello ESRI Community!

I am working with a ArcGIS Zone Lookup Instant App that searches if a customers input address is within our service territory. If they are, a popup appears that displays a very long item (the box pictured below) configured in Map Viewer using HTML and CSS. Ideally, I would like to have this very long item appear multiple times, side by side as opposed to one after the other in the popup so that it doesn't appear extremely long. Does anyone have any ideas as to how I can accomplish this? Either in the Zone Lookup Instant app or Map Viewer itself? Any help is appreciated, and thank you!

KellyHutchins

The app should respect popup settings configured in the ArcGIS Online Map Viewer. So any formatting you do there should carry over to the app.

Is your web map public? If you share the link I can take a look and see what is possible with the popup.

emoreno

Hi Kelly,

Thank you so much for you quick response! I was able to figure out how to have these items display in our Zone Lookup application side by side through the use of a table in my HTML/CSS code. I appreciate you being willing to assist.

I was wondering if you knew how to remove white space from the mobile view of the Zone Lookup Instant App, however? It seems like when I scroll through the popup on the application there is a large white space that prevents me from seeing a lot of the content. I've circled in the screenshot where all the white space is, and the red is where the content of my popup begins. I know this doesn't have to do with the HTML/CSS code as another one of our Zone Lookup Instant Apps does the same thing on the mobile view and does not use any HTML. Thank you again for your help!

KellyHutchins

Thanks for the screenshot but I can't reproduce the issue with extra whitespace that you are seeing. Are you able to reproduce it with the default sample app?

https://www.arcgis.com/apps/instant/lookup/index.html?find=6972-7056%2520SW%252029th%2520Rd%252C%252...

emoreno

Hi Kelly,

I am not able to reproduce the issue with the default application provided above on mobile view. Our instant apps tend to have the map turned off, however, and we also use the custom CSS option to remove the "results" tab in our Zone Lookup Apps. The attached post has the CSS that we use. I'm wondering if either of these would cause that extra white space in the mobile view?

Solved: Re: Remove Results Count from Zone Lookup Instant ... - Esri Community

KellyHutchins

Try adding this to the custom css and see if it helps.

@media only screen and (max-width: 859px){
  .no-map #resultsPanel {
    height: calc(100vh - 100px);
  }
  .no-map.panelSize-s .gt-container,
  .no-map.panelSize-m .gt-container,
  .no-map.panelSize-l .gt-container {
    grid-template-rows: auto auto 0 1fr;
  }
}

emoreno

Hi Kelly,

That CSS does appear to be working and there is no more white space in the mobile view! Thank you for all of your assistance!