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.