Legend not showing in Expand widget

KenBuja · ‎11-02-2020

When I add the legend to an Expand widget, it is not showing up. When I explore the element in Development Tools, all of the legend components are there. The legend does show up if I add it directly to the view (line 14). What am I missing?

  view.whenLayerView(regionLayer).
    then((layerView) => {
      const legend = new Legend({
        view: view,
        container: document.createElement('div')
      });
      const expand = new Expand({
        expandIconClass: 'esri-icon-legend',
        view: view,
        content: legend,
        expandTooltip: 'Legend'
      });

      view.ui.add(legend, 'bottom-right');
      view.ui.add(expand, 'top-left');
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-03-2020

Ken,

Your css rule is way to UN-specific. By having body, * that means everything gets overflow hidden. You should really be more specific as to what you want to get overflow hidden. For your current css rule you would have to use:

      body, * {
        box-sizing: border-box;
        margin: 0;
        overflow: hidden;
        font-family: 'Open Sans'
      }
      .esri-ui-inner-container * {
        overflow: visible !important;
      }‍‍‍‍‍‍‍‍‍

because the esri ui containers need to have overflow visible and most things under them as well.

View solution in original post

RobertScheitlin__GISP · ‎11-02-2020

Ken,

This seems to work fine:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>Legend widget | Sample | ArcGIS API for JavaScript 4.17</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
      require([
        "esri/views/MapView",
        "esri/widgets/Legend",
        "esri/widgets/Expand",
        "esri/WebMap"
      ], function (MapView, Legend, Expand, WebMap) {
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "05e015c5f0314db9a487a9b46cb37eca"
          }
        });

        var view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(function () {
          var legend = new Legend({
            view: view,
            container: document.createElement('div')
          });
          var bgExpand = new Expand({
            view: view,
            content: legend,
            expandIconClass: 'esri-icon-legend',
            expandTooltip: 'Legend'
          });

          // Add widget to the bottom right corner of the view
          view.ui.add(bgExpand, "bottom-right");
        });
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

KenBuja · ‎11-02-2020

I've tracked it down to css, where I have this:

body, * {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  font-family: 'Open Sans'
}‍‍‍‍‍‍

It's the overflow line that affects it. But if I comment that out, it does some really weird things to the map

I tried adding

.esri-expand {
  overflow: visible !important;
}‍‍‍

but that doesn't make a difference

RobertScheitlin__GISP · ‎11-03-2020

Ken,

Your css rule is way to UN-specific. By having body, * that means everything gets overflow hidden. You should really be more specific as to what you want to get overflow hidden. For your current css rule you would have to use:

      body, * {
        box-sizing: border-box;
        margin: 0;
        overflow: hidden;
        font-family: 'Open Sans'
      }
      .esri-ui-inner-container * {
        overflow: visible !important;
      }‍‍‍‍‍‍‍‍‍

because the esri ui containers need to have overflow visible and most things under them as well.

KenBuja · ‎11-03-2020

Thanks, Robert.

CSS is something I haven't been able to master and I'm always struggling with its intricacies.