Vertical Scrollbars in Expand

1060
2
02-13-2018 11:34 AM
ZoeZaloudek
Occasional Contributor

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.

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
ZoeZaloudek
Occasional Contributor

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…?

Legend widget in an Expand without vertical scrollbars (taller browser window)

Legend widget in an Expand showing vertical scrollbar (shorter browser window)

0 Kudos