topic Re: Pop-ups not displaying properly in ArcGIS Dashboards Questions

topic Re: Pop-ups not displaying properly in ArcGIS Dashboards Questions https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709370#M11962 <P>Maybe where it says Margin left & right reduce to 0 px rather than 20 px. </P> Tue, 23 Jun 2026 18:17:03 GMT Laura 2026-06-23T18:17:03Z Pop-ups not displaying properly https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709284#M11959 <P>I have some pop-ups not displaying properly in a dashboard. They look great in map viewer, but in the dashboard the graphic bar is squished. Images below. I did not code this pop up, it comes from ESRI. We used the Calculate Composite Index Tool and with the output you get a nicely designed popup. I will say this level of arcade coding is over my head. I poked around a bit and tried to change some of the code that I thought affected the width of the bar chart, but no dice. I've attached the code below as well. Any suggestions?</P><P>Thanks!</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KassieKM_0-1782218733275.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/154079iF80937C1E30F87A7/image-size/medium?v=v2&px=400" role="button" title="KassieKM_0-1782218733275.png" alt="KassieKM_0-1782218733275.png" /></span> </P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KassieKM_1-1782218755666.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/154080iAEC29B194C21CCF4/image-size/medium?v=v2&px=400" role="button" title="KassieKM_1-1782218755666.png" alt="KassieKM_1-1782218755666.png" /></span></P><P>Arcade code below</P><LI-CODE lang="python">var outIndexFields = [ { value: $feature.INDEX_, alias: "INDEX", min: 0.0, max: 0.7181205679375883, comparison: 0.19113439224444234}, { value: $feature.INDEX_RANK, alias: "Index - Mean (Rank)", max: 416}, ]; var inVariableFields = [ { value: $feature.Perc_HH_NoVehicle_PREPROCESSED, alias: "Percent of Housholds with No Vehicle (Min-max)", min: 0.0, max: 1.0, comparison: 0.07396450933711171 } , { value: $feature.PercHH_Poverty_PREPROCESSED, alias: "Percent of Housholds with Income Below the Poverty Level (Min-max)", min: 0.0, max: 1.0, comparison: 0.17998483537835877 } , { value: $feature.Perc_HH_Disability_PREPROCESSED, alias: "Percent of Housholds with 1 or more Persons with a Disabilty (Min-max)", min: 0.0, max: 1.0, comparison: 0.3194538320178566 } ]; var indexInfo = { name: "Composite Index" , preprocessing_method: "MINMAX", combination_method: "MEAN", removeMeanLine:"FALSE" }; var finalMessage = " "; var rankLabel = "Rank:"; var inputVariablesLabel = "Input Variables"; var comparisonTextforPopup = "Average"; // Constants and functions var nameCharLimit = 100; var htmlBreak = "<br>"; var htmlSpan = "</span>"; var margin = "&ensp;"; function borderLeftFnc(size, color){ return "border-left: "+size+"px solid "+color+";"; } function borderRightFnc(size, color){ if (size < 2) { return "border-right: 0px solid "+color+";";} else{ return "border-right: "+size+"px solid black;"; } } function borderTopBotton(size){ return "border-top: 1px solid grey;border-bottom: 1px solid grey;"; } function styleCell(typeOfCell, colorCell, width, height, borderLeftSize , borderRightSize){ var borderColor="grey" var round = 5; var roundleft = "border-left:1px solid gray;border-top-left-radius:"+round+"px;border-bottom-left-radius:"+round+"px;"; var roundright = "border-right:1px solid gray;border-top-right-radius:"+round+"px;border-bottom-right-radius:"+round+"px;"; var background = "background-color:"+colorCell+";"; var widthHeight = "height:"+height+"; width:"+width+"%;"; var styleValue = ""; var startTD ="<td style='"; var endTD = "'></td>"; if (typeOfCell == "left") return startTD+roundleft+background+borderTopBotton(1)+borderRightFnc(borderRightSize,borderColor)+widthHeight+endTD; if (typeOfCell == "center") return startTD+background+borderLeftFnc(borderLeftSize,borderColor)+borderTopBotton(1)+borderRightFnc(borderRightSize,borderColor)+widthHeight+endTD; if (typeOfCell == "right") return startTD+roundright+background+borderTopBotton(1)+borderLeftFnc(borderLeftSize, borderColor)+widthHeight+endTD; if (typeOfCell == "complete") return startTD+roundleft+background+borderTopBotton(1)+widthHeight+roundright+endTD; } function buildVariableBar(hexValueC, min, max, mean, val, barHeight, removeLine, fontSize){ var barHeight = Text(barHeight)+"px"; var widthLeft = 5; var widthRight = 5; var barLabelWidthLeft = Text(widthLeft)+"%"; var barLabelWidthRight = Text(widthRight)+"%"; var range = max-min; var minLabel = Text(Round(Number(min),3)); var maxLabel = Text(Round(Number(max),3)); var styleLabelCell = "background-color:transparent;border: 0px;height:"+barHeight+";width:"+barLabelWidthLeft+";"; var startCell = '<td style="'+styleLabelCell+' text-align: right;padding-right: 5px;">'+minLabel+'</td>'; var endCell = '<td style="'+styleLabelCell+' text-align: left;padding-left: 5px;">'+maxLabel+'</td>'; var figure = '<figure class="table"><table style="border-spacing:0px;margin-left:20px;margin-right:20px;margin-top:5px;margin-bottom:5px;'+fontSize+'"><tbody><tr><th></th>'; var endFigure = '</tr></tbody></table></figure>'; var proportionWidth = 100; var hexv = "#"+hexValueC; var hexValueColors = [hexv,hexv,hexv]; var widths = [0,0,0]; var borderLeft = [0,0,0]; var borderRight = [0,0,0]; var typeOfCell = []; var valProportion = (val-min)/range; var meanProportion = (mean-min)/range; var meanValProportion = Abs((mean-val)/range); var emptyMeanProportion = (max-mean)/range; var emptyvalueProportion = (max-val)/range; if (val == min) { if (removeLine) { hexValueColors[0]="transparent"; widths[0] = proportionWidth; typeOfCell = ["complete"]; } else { hexValueColors[0] = "transparent"; hexValueColors[1] = "transparent"; widths[0] = meanProportion*proportionWidth; widths[1] =(1 - meanProportion)*proportionWidth; borderRight[0] = 2; typeOfCell = ["left", "right"]; } } else if (val == max){ if (removeLine) { widths[0] = proportionWidth; typeOfCell = ["complete"]; } else { widths[0] = meanProportion*proportionWidth; widths[1] =(1 - meanProportion)*proportionWidth; borderRight[0] = 2; typeOfCell = ["left", "right"]; } } else if (val == mean){ hexValueColors[1] = "transparent"; widths[0] = valProportion*proportionWidth; widths[1] =(1 - valProportion)*proportionWidth; typeOfCell = ["left", "right"]; if (!removeLine) { borderRight[0] = 2; } } else if (val < mean) { if (removeLine) { hexValueColors[1] = "transparent"; widths[0] = valProportion*proportionWidth; widths[1] =(1 - valProportion)*proportionWidth; typeOfCell = ["left", "right"]; } else { typeOfCell = ["left", "center","right"]; widths[0] = valProportion*proportionWidth; widths[1] = meanValProportion*proportionWidth; widths[2] = emptyMeanProportion*proportionWidth; hexValueColors[1] ="transparent"; hexValueColors[2] ="transparent"; borderRight[1] = 2; } } else if (val > mean) { if (removeLine) { typeOfCell = ["left", "right"]; hexValueColors[1] = "transparent"; widths[0] = valProportion*proportionWidth; widths[1] =(1 - valProportion)*proportionWidth; } else { typeOfCell = ["left", "center", "right"]; widths[0] = meanProportion*proportionWidth; widths[1] = meanValProportion*proportionWidth widths[2] = (1-valProportion)*proportionWidth; hexValueColors[2] ="transparent"; borderRight[0] = 2; borderLeft[1] = 0; } } var temp = ""; for(var i = 0; i < Count(typeOfCell); i++) { temp = temp + styleCell(typeOfCell[i], hexValueColors[i], widths[i], barHeight, borderLeft[i], borderRight[i]); } return figure+startCell+temp+endCell+endFigure; } // Function to get quartiles from a provided range function getQuartiles(minval, maxval){ var range = maxval - minval; var quartileval = range / 4; var firstQuartile = minval+quartileval; var secondQuartile = firstQuartile+quartileval; var thirdQuartile = secondQuartile+quartileval; var fourthQuartile = thirdQuartile+quartileval; return [firstQuartile, secondQuartile, thirdQuartile, fourthQuartile]; } function calculateQuantiles(minValue, maxValue, numQuantiles) { // Generate an array of values from minValue to maxValue var data = []; for (var i = 0; i < numQuantiles; i++) { var quantileValue = minValue + (i / (numQuantiles - 1)) * (maxValue - minValue); data[i] = quantileValue; } return data; } // Function to get the color scheme based on the value function calcIndexHex(value, quantiles){ var hexValue = when(value < quantiles[0], "F7FCFD", value >= quantiles[0] && value < quantiles[1], "E0ECF4", value >= quantiles[1] && value < quantiles[2], "BFD3E6", value >= quantiles[2] && value < quantiles[3], "9EBCDA", value >= quantiles[3] && value < quantiles[4], "8C96C6", value >= quantiles[4] && value < quantiles[5], "8C6BB1", value >= quantiles[5] && value < quantiles[6], "88419D", value >= quantiles[6] && value < quantiles[7], "810F7C", value >= quantiles[7], "4D004B", "N/A") return hexValue } function createPopup(indexArray, variablesArray, indexInfoArray, messages){ var popupHTML = "" // # Pop-up Section 1: Index value information var overallIndexValue = Round((indexArray[0].value), 2); var overallIndexHex = calcIndexHex(overallIndexValue, calculateQuantiles(indexArray[0].min, indexArray[0].max, 9)); // ## Line 1: Index Title if (indexInfoArray.name == ""){ var indexTitle = "Composite Index: "+Text(overallIndexValue); } else { var indexTitle = indexInfoArray.name+": "+Text(overallIndexValue); } var removeLine = indexInfoArray.removeMeanLine == "TRUE"; // ## Line 2: Index rank var indexRankText = messages[1] + " "+ indexArray[1].value + " / " + indexArray[1].max; // ## Line 3: Bar to represent index value visually var indexBox = buildVariableBar(overallIndexHex, indexArray[0].min, indexArray[0].max, indexArray[0].comparison, indexArray[0].value, 30, false, ""); // ## Assemble html for pop-up section 1 var popupSection1HTML = '<h2><span>' + indexTitle + htmlSpan + htmlBreak + '<span style="font-size:12px">' + indexRankText + htmlSpan + htmlBreak + '<span style="font-size:14px">'+ indexBox + htmlBreak + htmlSpan + '<span style="font-size:18px">'+messages[2]+htmlSpan+"</h2>"; // # Pop-up Section 2: Explanatory variable information, Iterate on input fields - each field will have three lines: (1) Title, (2) Value var variablesHTML = ""; var variableCount = 0; for(var x in variablesArray){ // Get the needed data to assemble the lines for the variable var alias = variablesArray[x].alias; var val = Round(variablesArray[x].value, 3); var comp = Round(variablesArray[x].comparison, 3); var hex = "C1C1C1" // ## Line 1: Variable Title if (Count(alias) > nameCharLimit){var alias = Left(alias, nameCharLimit) + "... ";} var popupSection2Line1 = margin +'<span style="font-size:12px; word-wrap: break-word">'+ "<strong>" + alias + "</strong>"+htmlSpan; var popupSection2HTML = popupSection2Line1; var variableNameHTML = popupSection2HTML; var variableBarHTML = buildVariableBar(hex, variablesArray[x].min, variablesArray[x].max, variablesArray[x].comparison, variablesArray[x].value, 20, removeLine, "font-size:13px;"); variablesHTML += variableNameHTML + htmlBreak + variableBarHTML; variableCount += 1; } // # Pop-up Section 3: Index design information, Line 1: Sentence about how the index was created. var popupSection3HTML = '<span style="font-size:12px;">'+messages[0]+'</span>'; // Final section: Logic to assemble the popup popupHTML += popupSection1HTML; popupHTML += variablesHTML; popupHTML += popupSection3HTML; return popupHTML; } var txt = createPopup(outIndexFields, inVariableFields, indexInfo, [finalMessage, rankLabel, inputVariablesLabel]); return { type:'text', text:txt}</LI-CODE><P> </P> Tue, 23 Jun 2026 12:50:43 GMT https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709284#M11959 KassieKM 2026-06-23T12:50:43Z Re: Pop-ups not displaying properly https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709355#M11960 <P>As far as the color of it goes - that is most likely due to the theme of your dashboard. For size try looking at the different length settings in the code. For example </P><PRE> var widthLeft = 5; var widthRight = 5;</PRE><P>Try making this number larger and seeing the effect in dashboards. </P> Tue, 23 Jun 2026 16:57:06 GMT https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709355#M11960 Laura 2026-06-23T16:57:06Z Re: Pop-ups not displaying properly https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709366#M11961 <P>Thanks for the suggestion. I tried it and unfortunately it only affects where the bar starts, not the length of the bar.</P> Tue, 23 Jun 2026 17:45:39 GMT https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709366#M11961 KassieKM 2026-06-23T17:45:39Z Re: Pop-ups not displaying properly https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709370#M11962 <P>Maybe where it says Margin left & right reduce to 0 px rather than 20 px. </P> Tue, 23 Jun 2026 18:17:03 GMT https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709370#M11962 Laura 2026-06-23T18:17:03Z Re: Pop-ups not displaying properly https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709373#M11963 <P>Nope, nothing. Thanks again for the suggestions!</P> Tue, 23 Jun 2026 18:30:04 GMT https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709373#M11963 KassieKM 2026-06-23T18:30:04Z Re: Pop-ups not displaying properly https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709380#M11964 <P>I turned to chatgpt and found the culprit! </P><P>I changed these lines of code:</P><LI-CODE lang="c">var figure = '<figure class="table"><table style="border-spacing:0px;margin-left:20px;margin-right:20px;margin-top:5px;margin-bottom:5px;'+fontSize+'"><tbody><tr><th></th>'; var endFigure = '</tr></tbody></table></figure>';</LI-CODE><P> </P><P>To...</P><LI-CODE lang="c">var figure = '<table style="width:100%;border-spacing:0px;margin:5px 0px;'+fontSize+'"><tbody><tr>'; var endFigure = '</tr></tbody></table>';</LI-CODE><P> </P><P>And now all works well!</P> Tue, 23 Jun 2026 18:49:15 GMT https://community.esri.com/t5/arcgis-dashboards-questions/pop-ups-not-displaying-properly/m-p/1709380#M11964 KassieKM 2026-06-23T18:49:15Z