Legend not showing in Expand widget

605
4
Jump to solution
11-02-2020 06:13 AM
KenBuja
MVP Honored Contributor

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
0 Kudos
KenBuja
MVP Honored Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
KenBuja
MVP Honored Contributor

Thanks, Robert.

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

0 Kudos