Vertical Scrollbars in Expand

Question

I’ve learned that I really like the Expand widget in the ArcGIS API for JavaScript 4.X.  When I simply add a single widget (like BasemapGallery or Legend) to an Expand, a vertical scrollbar will appear if the content of the expanded pane is longer than the bottom of the screen.  This is great, it’s what I want.  It happens often enough, like when I’m demoing a web map in a meeting room with a projector.

However, when I make up custom content to put in an Expand, the vertical scrollbar doesn’t appear.  The content I’m making is a div with HTML (text, input buttons, etc).  I’ve tried creating a class to assign to the div, with the settings of overflow:hidden; overflow-y:auto; but this hasn’t worked.

ZoeZaloudek · Answer

Hi Robert,

Thanks for the quick reply.  After examining the sample and experimenting with my WMA’s code, I think another piece is setting the max-height in addition to overflow-y.  Just removing the overflow: hidden; from my class’s CSS didn’t appear to help, but then adding a max-height did make the scrollbar appear when the div content was long.  This will make it possible to scroll when the content of the div is longer than a set value, which is definitely helpful.

However, this doesn’t 100% replicate what I was hoping.  I’ve noticed that, when placed in an Expand, some widgets like Legend will automatically add or remove the vertical scrollbar depending on the height of the browser window (see screenshots below).  The only difference between these two screenshots is that, for the second image, I made the browser window shorter.  It seems either the Expand or the Widget is set to change its own height depending on the height of the browser window…?

rscheitlin · Answer

Zoe, Your issue is the overflow: hidden; Here is a quick sample: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Expand widget [beta] - 4.6</title> <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .cont { color: #323232; background-color: #fff; overflow-y: auto; position: relative; width: 420px; max-height: 540px; padding: 8px; } </style> <script> require([ "esri/Map", "esri/views/SceneView", "esri/widgets/Expand", "esri/widgets/BasemapGallery", "dojo/dom", "dojo/domReady!" ], function( Map, SceneView, Expand, BasemapGallery, dom ) { 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.container, expandIconClass: "esri-icon-basemap" }); var cExpand = new Expand({ view: view, content: dom.byId('custom'), expandIconClass: "esri-icon-experimental" }); // Add the expand instance to the ui view.ui.add(bgExpand, "top-right"); view.ui.add(cExpand, "top-right"); }); </script> </head> <body> <div id="viewDiv"></div> <div class="cont" id="custom">Blah Blah<br> First name: <input type="text" name="fname"><br><br> Last name: <input type="text" name="lname"><br><br> Blah Blah<br> First name: <input type="text" name="aname"><br><br> Last name: <input type="text" name="bname"><br><br> Blah Blah<br> First name: <input type="text" name="cname"><br><br> Last name: <input type="text" name="dname"><br><br> <br><br><br><br><br> Blah Blah<br> <br><br><br><br><br> Blah Blah<br> <br><br><br><br><br> Blah Blah<br> </div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍