Is it possible to put a legend widget in a container outside the viewDiv container?

[janzagar_0]

I want to place a legend div that I'm creating using the Legend widget in a HTML div that is not a child of the "viewDiv" element. Is this even possible? I really don't want to have a legend item floating around in my map div.

I have included a sample CodePen below for reference. I want the legend to go in the "sidebar" element.

https://codepen.io/janzagar0/pen/dPyjeYR

[JoelBennett · Accepted solution]

Yes, you can create a legend as a child of any pre-existing element.  The following example shows getting a reference to an existing element via document.getElementById:

const legend = new Legend({
  view: view,
  container: document.getElementById("sidebar")
});

In your example, the "sidebar" element needs to be created and added to the document before creating the Legend though.

[janzagar_0]

Thank you Joel. I realized I was separately making a really basic CSS-related error and the issue has now been fixed.