Nearby app: Map container size and Clear Search Results button

[NataliyaLys]

I was wondering if there is any way to resize the 'map container' in the NearBy app, so there is no blank white space on the right (see attached)?

Also, every time I want to do a new search I have to click on the 'Clear Search Result' button. Is there a way to by pass this, and/or hide the button. And instead have a new search initiated right away from a map click? (This was a functionality in a legacy 'Information lookup' template).

Thank you,

Nataliya

[KellyHutchins]

The whitespace to the right shouldn't be there. Looks like there could be a potential bug. Is your app public? If so can you share the link? 

It is required to clear the search each time. While in "search mode" you can interact with the map to view info about the selected features so we require that you clear out the selection before performing another search. 

[NataliyaLys]

@KellyHutchins It appears that the 'white space' would only show on a bigger desktop monitor. I tried the app on a laptop and didn't get the 'white space' on the right. 

Here is a link to my app: https://omaha.maps.arcgis.com/apps/instant/nearby/index.html?appid=069f919b138e46989daf8b1743b87df9

Thank you,

[KellyHutchins]

Can you try adding the following to the custom css configuration option? 

.grid-container,
.column-14,
.column-12,
.column-10,
.column-18,
.column-16,
.column-6 {
  height: 100%;
  width: 100%;
}

[NataliyaLys]

Thanks @KellyHutchins, that worked.

[CameronBlandy]

Hi Kelly.

While this fixed the white space issue for small screens it renders the map on desktop invisible. It has something to do with max-width:75vw. 

Cameron

[KellyHutchins]

Can you send me a link to your app that has the custom css?  Might need to be modified due to app updates. 

[CameronBlandy]

Hi Kelly.
Here is the link to the app.
https://surrey.maps.arcgis.com/apps/instant/nearby/index.html?appid=5eab64bc07b142f99142a36078440578

[KellyHutchins]

If you remove the css is the white space still there on desktop? It looks like there is an issue with the max-width on smaller screen sizes that I'll look into but I don't know that the css with this post is needed anymore. 

[CameronBlandy]

Hi Kelly,
The only css I added was this: img{vertical-align:middle;margin: 5px}.esri-popup__content{margin:5px}.
I tested the css you suggested: .grid-container, .column-14, .column-12, .column-10, .column-18, .column-16, .column-6 {height:100%;width:100%;}. This made the desktop map disappear. The small device map was good:
With no css overrides the map on a small device only consumes 75% of the width as per this css setting:
The offending css (main.css) is this: .column-18 { width: 100%; max-width: 75vw;}. It is because the nearby side panel consumes the other 25% in desktop mode.
When I switch to responsive mode in Developer Tools (Chrome) get this:
[cid:image001.png@01D7F0E5.CCC4B720]

And the css (main.cs) now has two media queries.