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');
});
Solved! Go to Solution.
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.
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>
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
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.
Thanks, Robert.
CSS is something I haven't been able to master and I'm always struggling with its intricacies.