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]

I put in a fix for the 75% width on small devices... should be good to go tomorrow. 

[KellyHutchins]

And my question is why did you add the custom css to your app?  Was it to handle blank white space on the right side on desktop? If so that should be good now. If it was to handle blank space in mobile view that should be good tomorrow. 

[CameronBlandy]

Hi Kelly,
There never was an issue with white space in the Desktop view only in the mobile view. I used the css code that you recommended to get rid of the mobile view white space. Do I need to re-create the app after the update tomorrow?
I added the other css to tidy up the header for the popup (img{vertical-align:middle;margin: 5px}.esri-popup__content{margin:5px}).

[KellyHutchins]

No you shouldn't need to recreate the app. It should just work. 

I think if you add this css to your app instead of the other logic it should address the issue today : 

@media screen and (max-width: 859px) {
  .column-18 {
    width: 100%;
    max-width: 100vw;
  }
}

[KellyHutchins]

Just wanted to check-in and see if the update addressed the mobile white space issue you were seeing?

[NataliyaLys]

Now I see the 'white space' on mobile. No more 'white space' on desktop so I removed original CSS you provided. 

[KellyHutchins]

Strange it looks like the header is missing. Is your app link public? If so can you share it? If not any info about how your app is configured would be helpful. 

[NataliyaLys]

Yes, it's public, below is the link. I am hiding header and slider with following css (.app-header {display: none} .esri-slider {display: none} )

https://omaha.maps.arcgis.com/apps/instant/nearby/index.html?appid=069f919b138e46989daf8b1743b87df9

[KellyHutchins]

Ok since you are hiding those with css we'll have to add additional logic to give the. map more space on mobile. I'll send you some css soon. 

[KellyHutchins]

Try adding this css: 

@media screen and (max-width: 859px)
.buffer #mapPanel {
    top: 32px;
    height: calc(100% - 32px);
}