Nearby app: Map container size and Clear Search Results button

1358
29
08-26-2021 09:42 AM
Labels (1)
NataliyaLys
Occasional Contributor II

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

0 Kudos
29 Replies
KellyHutchins
Esri Frequent Contributor

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. 

0 Kudos
NataliyaLys
Occasional Contributor II

@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,

0 Kudos
KellyHutchins
Esri Frequent Contributor

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%;
}
0 Kudos
NataliyaLys
Occasional Contributor II

Thanks @KellyHutchins, that worked.

0 Kudos
CameronBlandy
Occasional Contributor

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

0 Kudos
CameronBlandy
Occasional Contributor
0 Kudos
KellyHutchins
Esri Frequent Contributor

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. 

0 Kudos
CameronBlandy
Occasional Contributor
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.
0 Kudos