Free-floating search widget thats open at app start

AaronManuel2

Hello, I'm trying to add a search widget to my EB Dev app that is open by default at map start, and has good placement.

I do have a widget controller in the app at the top with most of my widgets, I can add another controller with just the search widget, and have it open in the corner. But placement is a bit weird and its not very resolution responsive.

I was also thinking of adding a slim row on top of the map panel, and just putting the search widget on that. But I cant make the row as small height wise as I want. What config file do I need to edit?

How are you all doing standalone search widgets on your experience builder apps? Open to different ideas, trying to make something that looks clean and responds to well to different screen sizes. Thanks!

ZachBodenner

Sure that's helpful to see. Yeah so for this one, you can tell that the search widget is positioned as a percent value away from the left side of it's parent container. This is discernable if you un-maximize the window and then click and drag a corner. You'll see how the search widget eventually goes behind the map tools if you drag it small enough.

I would recommend using a hard-coded pixel value to set its distance from the left side because then this wont happen to matter the size of the window. It will also create a consistent look across all window sizes. What I like to do is find the size of the map tool button and then add 10px or so on each side, and use that value as the left-distance px amount. So if the home button there is 50 px, then I'd set the left-alignment of the search widget to 70 px. Also don't put it in a widget controller, just let it float.

Moving over to a mobile view, we can see the tools are totally rearranged, which just will not happen without custom re-arranging for a mobile size:

In this case they've also repositioned the map tools and put the search right at the top. Resizing the window now does not "smush" the search bar, which tells us here that they might have hard-coded the distance from the sides of the parent container in some way.

Happy mapping,
- Zach

View solution in original post

ZachBodenner

I usually put mine in the header, but depending on your organization you might not be able to. What are the settings you're using if you place it on it's own on your map that are making not resolution responsive? You should be able to strong arm it to be a specific size if you want it that way.

Happy mapping,
- Zach

AaronManuel2

Thanks Zach, since I have my layer list and legend on the right in a separate panel, I could just put a row on top for the search widget, so I might just do that.

I'm using a default res of 1920 x 1080, and for the widget panel I have an x offset of 250 and a y offset of -400, from the center position. I have the size set at 320 x 100. I guess my problem is my app itself isn't great as a whole on smaller screens so I probably need to do some adjustment there, if you have some tips I'm all ears.

I was looking at this tutorial which seems have to some good practices - https://www.esri.com/arcgis-blog/products/experience-builder/mapping/exb-responsive-web-design

ZachBodenner

It can be kind of frustrating to get everything to scale right. Usually I try to keep things in specific pixel measurements because I find it easier to predict how they'll look, and then I'll just test on the smallest screen size available in ExB to make sure nothing overlaps. I don't know if it's best practice or not, but that's what I find myself doing.

Happy mapping,
- Zach

AaronManuel2

That makes sense. I've done a little of this before and sometimes I end up with things being too spread out on normal monitors but thats better than the page elements being crammed together on mobile.

ZachBodenner

Ah yeah, if you need mobile config it really does require doing that manually by switching to the small screen mode. Otherwise you're a bit doomed to unpredictable layouts.

Happy mapping,
- Zach

AaronManuel2

for reference I'm trying to achieve something simple and clean like they have in this app here - https://mapping.kenoshacountywi.gov/InteractiveMapping/

ZachBodenner

Sure that's helpful to see. Yeah so for this one, you can tell that the search widget is positioned as a percent value away from the left side of it's parent container. This is discernable if you un-maximize the window and then click and drag a corner. You'll see how the search widget eventually goes behind the map tools if you drag it small enough.

I would recommend using a hard-coded pixel value to set its distance from the left side because then this wont happen to matter the size of the window. It will also create a consistent look across all window sizes. What I like to do is find the size of the map tool button and then add 10px or so on each side, and use that value as the left-distance px amount. So if the home button there is 50 px, then I'd set the left-alignment of the search widget to 70 px. Also don't put it in a widget controller, just let it float.

Moving over to a mobile view, we can see the tools are totally rearranged, which just will not happen without custom re-arranging for a mobile size:

In this case they've also repositioned the map tools and put the search right at the top. Resizing the window now does not "smush" the search bar, which tells us here that they might have hard-coded the distance from the sides of the parent container in some way.

Happy mapping,
- Zach

AaronManuel2

Thanks Zach for the insight, very helpful