topic Re: Legend not showing in Expand widget in ArcGIS JavaScript Maps SDK Questions

Legend not showing in Expand widget

KenBuja — Sat, 11 Dec 2021 19:28:38 GMT

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');
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Legend not showing in Expand widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:28:40 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Legend not showing in Expand widget

KenBuja — Sat, 11 Dec 2021 19:28:43 GMT

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

Re: Legend not showing in Expand widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:28:46 GMT

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.

Re: Legend not showing in Expand widget

KenBuja — Tue, 03 Nov 2020 14:44:33 GMT

Thanks, Robert.

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