How to move Search widget outside of the MapView?

ParkerWelch · ‎10-15-2018

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.

ParkerWelch · ‎09-10-2019

Just dropping an update here in case someone else has the same problems...

I figured out how to get the desired behavior or moving the Search widget off the map view into another HTML element.

My issue was that I added the Search widget to the view via the line

view.ui.add(searchWidget, {position: "top-right"});‍

and then tried to move it out of the view via the container property.

Since it was already added to the view, it ended up trying to move the entire view into the container element.

I simply commented out the above line of code and changed the container property in my Search widget constructor and everything worked as expected.

View solution in original post

RobertScheitlin__GISP · ‎10-16-2018

Parker,

The DOM element with id "nav-fullscreen" needs a child div that will be used for the search widget. So add a child div give that an id and use that id in the search widget container property. The widget will replace the contents of the container element.

ParkerWelch · ‎10-16-2018

Thanks for the reply Robert -

I tried using a child div as my container and it just moved the entire map into that container.

Thoughts?

RobertScheitlin__GISP · ‎10-16-2018

Parker,

Roll back to 4.8 and see if this is a new issue in 4.9.

ParkerWelch · ‎10-16-2018

Looks to be the same in 4.8 and 4.9.

RobertScheitlin__GISP · ‎10-16-2018

Parker,

It is something in your apps css or something then... Here is a working basic sample:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search Widget - 4.9</title>

  <style>
    html,
    body{
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #viewDiv {
      height: calc(100% - 40px);
    }
    #header {
      height: 40px;
      width: 100%;
      background-color: blue;
    }
    #searchDiv {
      float: right;
      margin-right: 10px;
      margin-top: 4px;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Search"
    ], function(
      Map,
      SceneView,
      Search) {

      var map = new Map({
        basemap: "satellite",
        ground: "world-elevation"
      });

      var view = new SceneView({
        scale: 123456789,
        container: "viewDiv",
        map: map
      });

      var searchWidget = new Search({
        view: view,
        container: "searchDiv"
      });

    });
  </script>
</head>

<body>
  <div id="header">
    <div id="searchDiv"></div>
  </div>
  <div id="viewDiv"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ParkerWelch · ‎10-16-2018

Funny you should mention that, I was suspecting CSS was somehow being weird. I'll dive in and have a more thorough look and report back with my findings.

Thanks again for looking into this.

ParkerWelch · ‎09-10-2019

Just dropping an update here in case someone else has the same problems...

I figured out how to get the desired behavior or moving the Search widget off the map view into another HTML element.

My issue was that I added the Search widget to the view via the line

view.ui.add(searchWidget, {position: "top-right"});‍

and then tried to move it out of the view via the container property.

Since it was already added to the view, it ended up trying to move the entire view into the container element.

I simply commented out the above line of code and changed the container property in my Search widget constructor and everything worked as expected.