4x: How to manually place an Expand in its container?

DirkVandervoort · ‎04-24-2017

   var searchWidget = new Search({
     view: view
   });

   var expand = new Expand({
     expandIconClass: "esri-icon-search",
     view: view,
     content: searchWidget
   });
   view.ui.add(expand, "manual");‍‍‍‍‍‍‍‍‍‍

By default the Expand gets placed in the upper-left corner, flush with the content of the container. I want to place the Expand someplace else (e.g., flush with the left side of the container, 300px from the top). I assume I can do it in a style, however I cannot create a class and set the location properties of the class. I can a handle on the element. I can inspect it in the debugger. But I cannot change the location properties of the element.

Any help please. A clue. Anything...

RobertScheitlin__GISP · ‎04-25-2017

Dirk,

I am having a hard time with this as well. If you are only going to use one expand widget then you can simply use this css rule:

.esri-expand {
  left: 20px;
  top: 400px;
}‍‍‍‍

But the issue is when you need more than one.

The Widget class says it have a "id" property

The unique ID assigned to the widget when the widget is created

So I though I could assign that and then use a css rule with that id but I never see the id applied to the widget.

Maybe Matt can shead some light on this.

MDriscoll-esristaff‌

KellyHutchins · ‎04-25-2017

If I understand the question correctly this JS Bin should help.

JS Bin - Collaborative JavaScript Debugging

Basically it uses the container property to define a dom node where the expand widget will be rendered.

Edited - see example that uses 'manual' below for a simpler approach.

RobertScheitlin__GISP · ‎04-25-2017

Kelly,

Thanks for that code example. I still have a question about the proper use of the view.ui.add(x, "manual"); then. How do you properly use "manual" then?

KellyHutchins · ‎04-25-2017

Good question. I missed the 'manual option' in the api ref. So I think this is how you'd use it.

JS Bin - Collaborative JavaScript Debugging

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Expand widget - 4.3</title>

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

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .esri-ui-manual-container{
      top:300px;
      right:0;
    }


  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Expand",
      "esri/widgets/BasemapGallery",
      "dojo/domReady!"
    ], function(
      Map, SceneView, Expand, BasemapGallery
    ) {

      var map = new Map({
        basemap: "satellite"
      });

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

      // Create a BasemapGallery widget instance and set 
      // its container to a div element

      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      // Create an Expand instance and set the content
      // property to the DOM node of the basemap gallery widget
      // Use an Esri icon font to represent the content inside
      // of the Expand widget

      var bgExpand = new Expand({
        view: view,
        content: basemapGallery.domNode,
        container: "expandDiv",
        expandIconClass: "esri-icon-basemap"
      });

      // Add the expand instance to the ui

      view.ui.add(bgExpand, "manual");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎04-25-2017

Sorry to drag this on, but wouldn't that affect all ui element added manually instead of just one particular element?

KellyHutchins · ‎04-25-2017

Yes. But I think I'm missing something. If you just want to place one element in a particular location then wouldn't you just position it as shown in the first example?

DirkVandervoort · ‎04-25-2017

I'm trying to add multiple Expands, each at their own manual location e.g., right side, left side, top, bottom, etc. These host OOTB widgets and custom widgets we are writing ourselves. Thank you for the input for one element - that solved part of the problem. Any idea how to handle multiple widgets?

RobertScheitlin__GISP · ‎04-25-2017

Yes that is exactly what I am asking as well, multiple specifically placed ui items.

KellyHutchins · ‎04-25-2017

Same as the approach in the first comment I made just create a different div for each and use css to position the expand widget where you'd like. You'll want to take a look at the css for the Expand widget - see link in API ref because in some cases you'll need to add logic to ensure the container doesn't expand off screen.

JS Bin - Collaborative JavaScript Debugging