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

[DirkVandervoort]

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

[Esad]

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");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[NilsBabel1]

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!