topic Re: 4x: How to manually place an Expand in its container? in ArcGIS JavaScript Maps SDK Questions

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

DirkVandervoort — Sun, 12 Dec 2021 01:07:45 GMT

   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...

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:07:48 GMT

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‌

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

KellyHutchins — Tue, 25 Apr 2017 16:45:57 GMT

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.

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

RobertScheitlin__GISP — Tue, 25 Apr 2017 16:52:57 GMT

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?

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

KellyHutchins — Sun, 12 Dec 2021 01:07:51 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

RobertScheitlin__GISP — Tue, 25 Apr 2017 17:08:38 GMT

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

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

KellyHutchins — Tue, 25 Apr 2017 17:12:23 GMT

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?

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

DirkVandervoort — Tue, 25 Apr 2017 17:21:15 GMT

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?

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

RobertScheitlin__GISP — Tue, 25 Apr 2017 17:23:40 GMT

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

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

KellyHutchins — Tue, 25 Apr 2017 17:23:52 GMT

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

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

Esad — Sun, 12 Dec 2021 01:07:53 GMT

Hello Kelly,

Thanks for the answers. I have a question related to the topic. I was able to set the position of the div element with container property. But I was wondering if there is a better way to do it. Following is the code and this is the working file JS Bin - Collaborative JavaScript Debugging.

Thanks,

Esad

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

      // 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, "top-right");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

NilsBabel1 — Mon, 24 Aug 2020 23:54:21 GMT

I'm having that exact problem. I'm trying to add the expand widget with the layer list widget inside to a custom div, a toolbar across the bottom of the map. But when I click on the expand widget the layer list opens downward and off the page. I've looked at the css documentation for the expand widget but can't figure out what I need to edit. In fact none of my class overrides seem to have any effect. Maybe I'm doing something wrong. Could you steer me in the right direction on how to manipulate a widget's css? Thanks a bunch!