topic Nearby app: Map container size and Clear Search Results button in ArcGIS Instant Apps Questions

Nearby app: Map container size and Clear Search Results button

NataliyaLys — Thu, 26 Aug 2021 16:42:16 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Thu, 26 Aug 2021 16:57:33 GMT

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.

Re: Nearby app: Map container size and Clear Search Results button

NataliyaLys — Thu, 26 Aug 2021 17:54:36 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Thu, 26 Aug 2021 21:39:23 GMT

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%; }

Re: Nearby app: Map container size and Clear Search Results button

NataliyaLys — Mon, 30 Aug 2021 20:50:33 GMT

Thanks @KellyHutchins, that worked.

Re: Nearby app: Map container size and Clear Search Results button

NataliyaLys — Tue, 31 Aug 2021 15:23:26 GMT

@KellyHutchins regarding the 'Clear Search Results' button, I understand your point that while in the 'search mode' I can click on individual layers in result list and see them highlighted on the map, etc. But in my specific case, I don't really need an ability to interact with returned features, I just want to see results and that's it. And then, when I click on the map I just want the current results to be cleared and new results displayed.

I was thinking that maybe it would be useful to have an option in the app configuration to allow users to interact/select layers in result list, but it's probably not that simple.

If you have any suggestions/ideas about this I would like to hear it.

Thank you,

Nataliya

Re: Nearby app: Map container size and Clear Search Results button

CameronBlandy — Tue, 14 Dec 2021 18:55:04 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Tue, 14 Dec 2021 19:04:18 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

CameronBlandy — Tue, 14 Dec 2021 19:31:04 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Tue, 14 Dec 2021 20:11:46 GMT

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.

Re: Nearby app: Map container size and Clear Search Results button

CameronBlandy — Tue, 14 Dec 2021 20:32:04 GMT

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.

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Tue, 14 Dec 2021 20:58:18 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Tue, 14 Dec 2021 20:59:40 GMT

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.

Re: Nearby app: Map container size and Clear Search Results button

CameronBlandy — Tue, 14 Dec 2021 21:09:04 GMT

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}).

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Tue, 14 Dec 2021 21:15:51 GMT

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; } }

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Wed, 15 Dec 2021 22:59:14 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

NataliyaLys — Thu, 16 Dec 2021 16:39:59 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Thu, 16 Dec 2021 16:46:33 GMT

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.

Re: Nearby app: Map container size and Clear Search Results button

NataliyaLys — Thu, 16 Dec 2021 16:51:00 GMT

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

Re: Nearby app: Map container size and Clear Search Results button

KellyHutchins — Thu, 16 Dec 2021 16:56:33 GMT

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.