How to display widgets vertically outside view ui

Question

To start, sorry for my rough English but I speak French.

I would like to create a new application with, on the right of the map, a toolbar that would contain several widgets.

Then I would like the content of each widget to open in another div.

I followed this discussion but I can't seem to position the widgets vertically and make their content visible in another div.

Attached is a view of the application design

Thank you in advance for the help you can give me.

Ps: i'm webdesigner but new in javascript.

AppDesing - Api Javascript2.png

AppDesing - Api Javascript.png

Screen2.png

Screen1.png

BeccaBoyd_0-1619729091844.png

wayfaringrob_1-1734391281132.png

RobertScheitlin__GISP · Accepted Answer

This a very rough hurried sample of that. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>Toolbar - 4.14</title> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; } .appCont { padding: 0; margin: 0; height: 100%; width: 100%; display: flex; flex-flow: row nowrap; } #viewDiv { width: calc(100% - 32px); height: 100%; padding: 0; margin: 0; } #toolbar { height: 100%; width: 32px; padding: 0; margin: 0; display: flex; background: green; flex-flow: column; } #widgetDivCont { width: 300px; padding: 0; margin: 0; display: flex; background: white; flex-flow: column; display: none; } #widgetDiv, #widgetDiv2 { max-height: 200px; } .myButton { font-size: 14px; color: #fff; width: 32px; height: 32px; padding: 0; margin: 0; overflow: hidden; cursor: pointer; text-align: center; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } </style> <script> require([ "esri/WebScene", "esri/views/SceneView", "esri/widgets/Home", "esri/widgets/BasemapGallery", "esri/widgets/LayerList" ], function (WebScene, SceneView, Home, BasemapGallery, LayerList) { var scene = new WebScene({ portalItem: { // autocasts as new PortalItem() id: "adfad6ee6c6043238ea64e121bb6429a" } }); var view = new SceneView({ container: "viewDiv", map: scene }); const widgetDivCont = document.getElementById('widgetDivCont'); const bmBtn = document.getElementById('basemapBtn'); const lyrlistBtn = document.getElementById('llBtn'); bmBtn.addEventListener('click', function(){ widgetDivCont.style.display = "block"; }); var basemapGallery = new BasemapGallery({ view: view, container: widgetDiv }); view.when(function() { var layerList = new LayerList({ view: view, container: widgetDiv2 }); }); }); </script> </head> <body></body> <div class="appCont"> <div id="viewDiv"></div> <div id="toolbar"> <div id="basemapBtn" class="myButton esri-home"><span aria-hidden="true" class="esri-icon esri-icon-basemap"></span></div> <div id="llBtn" class="myLayerList myButton"><span aria-hidden="true" class="esri-icon esri-icon-bookmark"></span></div> </div> <div id="widgetDivCont"> <div id="widgetDiv"></div> <div id="widgetDiv2"></div> </div> </div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍