ArcGIS API for JS 4.15: problem populating pop-up content

Question

I'm creating a web map based on this example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query Except I've modified it so that the drop-down list is dynamically populated based on the values available in an attribute column (MajBas in this instance). Everything works well EXCEPT that the pop-up content does not display properly after querying a feature. Specifically, only the pop-up title shows but not any of the content. I'm having trouble figuring out why this would be. I'd appreciate any suggestions you may have for fixing this so that the pop-up content is visible after querying. <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title>Project viewer</title> <style> html, body, #mainViewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } h2 { color: black; font-family: "Noto Sans", sans-serif; line-height: 1; } p { color: black; font-family: "Noto Sans", sans-serif; } div { line-height: 0; } #optionsDiv { background-color: white; color: white; padding: 10px; width: 100%; -webkit-box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67); -moz-box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67); box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67); opacity: 0.90; } #drop-downs { padding-bottom: 15px; } widget { /* Fill in later to style drop down widget */ } #printResults { line-height: 1; font-family: "Noto Sans", sans-serif; font-style: italic; font-size: 12px; color: black; } #doBtn { box-shadow:inset 0px 0px 0px 0px #9fb4f2; background-color:#1a1b1f; border: 0px solid #4e6096; display:inline-block; cursor:pointer; color:#ffffff; padding:6px 12px; text-decoration:none; border: 0px; outline:none; transition: all 0.3s ease 0s; } #doBtn:hover { background-color:#494b51; outline:none; } #doBtn:active { position:relative; top:1px; border: 0px; outline:none; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.15/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/Basemap", "esri/widgets/LayerList", "esri/layers/FeatureLayer", "esri/PopupTemplate", "esri/layers/GraphicsLayer", "esri/tasks/QueryTask", "esri/tasks/support/Query", "esri/widgets/Home" ], function( Map, MapView, Basemap, LayerList, FeatureLayer, PopupTemplate, GraphicsLayer, QueryTask, Query, Home ){ var basinUrl = "https://services.arcgis.com/v01gqwM5QqNysAAi/arcgis/rest/services/Chesapeake_Bay_major_watersheds_feature/FeatureServer/0"; //* Define the popup content for each result var popupTemplate = { title: "{MajBas}", fieldInfos: [ { fieldName: "MajBas", label: "Major basin" } ], content: "{MajBas} test" }; // Layer - project footprints const basinLayer = new FeatureLayer({ url: basinUrl, outFields: ["*"], visible: false }); // Layer - dark nav basemap const basemap = Basemap.fromId("streets-night-vector"); //** Point querytask to project boundary URL var qTask = new QueryTask({ url: basinUrl }); //** Set the query parameters to always return geometry and all fields. //** Returning geometry allows us to display results on the map/view var params = new Query({ returnGeometry: true, outFields: ["*"] }); //* GraphicsLayer for displaying results var resultsLayer = new GraphicsLayer(); var map = new Map({ basemap : basemap, layers: [basinLayer, resultsLayer] }); var mainView = new MapView({ container: "mainViewDiv", map: map, popup: { highlightEnabled: false, dockEnabled: true, dockOptions: { breakpoint: false, position: "top-right" } }, center: [-75.325395, 40.306275], zoom: 5 }); // create home widget var homeWidget = new Home({ view: mainView }); // add widget with drop-down options mainView.ui.add("optionsDiv", { position: "bottom-left", index: 0 }); // add home widget mainView.ui.add(homeWidget, { position: "top-left", index: 0 }); //* for drop down var basinTypeSelect = document.getElementById("valSelect"); //* query all features from the basin layer mainView .when(function () { return basinLayer.when(function () { var query = basinLayer.createQuery(); return basinLayer.queryFeatures(query); document.getElementById("doBtn").addEventListener("click", doQuery); }); }) .then(getValues) .then(getUniqueValues) .then(addToSelect) //* return an array of all the values in the //* basin name field function getValues(response) { var features = response.features; var values = features.map(function (feature) { return feature.attributes.MajBas; }); return values; } //* return an array of unique values in //* the MajBas field of the basin layer function getUniqueValues(values) { var uniqueValues = []; values.forEach(function (item, i) { if ( (uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) && item !== "" ) { uniqueValues.push(item); } }); return uniqueValues; } //* Add the unique values to the basin type //* select element. This will allow the user //* to filter basin by name. function addToSelect(values) { values.sort(); values.forEach(function (value) { var option = document.createElement("option"); option.text = value; basinTypeSelect.add(option); }); } //** Call doQuery() each time the button is clicked mainView.when(function () { mainView.ui.add("optionsDiv", "bottom-left"); document.getElementById("doBtn").addEventListener("click", doQuery); }); //** var attributeName = document.getElementById("MajBas"); // Executes each time the button is clicked function doQuery() { // Clear the results from a previous query resultsLayer.removeAll(); // Build new query params.where = "MajBas =" + "'" + basinTypeSelect.value + "'"; // executes query and calls getResults() once promise is resolved // promiseRejected() is called if the promise is rejected qTask.execute(params).then(getResults).catch(promiseRejected); } // Called each time the promise is resolved function getResults(response) { // Loop through each results and assign a symbol and PopupTemplate var basinResults = response.features.map(function (feature) { // Sets the symbol of each resulting feature feature.symbol = { type: "simple-fill", color: [212, 161, 87, 0.25], outline: { // autocasts as new SimpleLineSymbol() color: [128, 128, 128, 0.5], width: "0.5px" } }; feature.popupTemplate = popupTemplate; return feature; }); resultsLayer.addMany(basinResults); // animate to the results after they are added to the map mainView .goTo(basinResults) .then(function () { mainView.popup.open({ features: basinResults, featureMenuOpen: true, updateLocationEnabled: true }); }) .catch(function (error) { if (error.name != "AbortError") { console.error(error); } }); // print the number of results returned to the user document.getElementById("printResults").innerHTML = basinResults.length + " result(s) found"; } // Called each time the promise is rejected function promiseRejected(error) { console.error("Promise rejected: ", error.message); } }); </script> </head> <body> <div id="mainViewDiv"></div> <div id="optionsDiv"> <h2>Example</h2><br> <div id="drop-downs"> <p><b>Basin</b></p> <select id="valSelect" class="widget"></select> </div> <div align="center"><button id="doBtn">Search</button></div> <p><div align="center"><span id="printResults"></span></div></p> </div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Kaycee, The culprit is this css rule. div { line-height: 0; }‍‍‍