AnsweredAssumed Answered

How to move Search widget outside of the MapView?

Question asked by welchparker on Oct 15, 2018
Latest reply on Oct 16, 2018 by welchparker

version: ArcGIS API JavaScript 4.9

 

So, I'm building a webapp from scratch using ArcGIS API for JS 4.9 and I've got a DOM element 'nav-fullscreen', which spans the screen width and sits directly above my map view.

 

I am attempting to move the Search input box off the 'viewDiv' element and onto the 'nav-fullscreen' element. Like this...

 

Help documentation suggests that I use the container property in my Search widget constructor. Should be pretty simple right?

 

But when I try that, it takes the objects that were previously in 'nav-fullscreen' and places them in the Search Bar, rather than taking the search bar and putting it in the 'nav-fullscreen'. Seems backwards to me.

 

In this image, you can see that my 'nav-fullscreen' element has been moved into the Search Bar rather than vice versa.

 

MY CODE (not sure about that #...The syntax highlighter added it)

#searchWidget = new Search({
  view: view,
  container:"nav-fullscreen",
  ...
})

 

MY QUESTIONS

Am I doing something wrong with the constructor?

Did I just misunderstand the functionality of the container property in the Search widget constructor?

Is it really possible that the container property just overrides the element tree and moves an element into the widget rather than moving the widget into an element?

 

Thanks for any light you can shed on this.

Outcomes