[UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

n8srumsey — Thu, 11 Feb 2021 12:20:33 GMT

Hi all,

I have recently encountered an issue where all UI elements (zoom buttons, legends, popups) are displaying as plain html outside of the map view. Their JavaScript functionality seems to be still working, but they are not displaying correctly (for example the zoom in/zoom out elements work, but do not display as buttons). No apparent issues seems to have caused it, as it started occurring when no changes were being made to the code. I have since reverted to previous versions before the onset of this issue, where UI elements were displaying correctly, but now even in those versions the UI is not displaying accurately.

No errors or warnings are displayed in my browser's console.

For general information, I am using the JavaScript API version 4.18, using Microsoft Edge.

This is what my current display looks like:

I expect the UI elements to look like this, where they are all rendered as styled elements on the view such as this:

My code is as follows:

<!DOCTYPE html> <html> <head>  <style> /* styling unrelated to ArcGIS */ html, body, #viewDiv { padding: 0; margin: 0; height: 670px; width: 100%; } .esri-view-width-xlarge .esri-popup__main-container, .esri-view-width-large .esri-popup__main-container, .esri-view-width-medium .esri-popup__main-container{ max-height: 450px !important; } </style> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="viewDiv"> </div> <script src="https://js.arcgis.com/4.18/"></script> <script> require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/CSVLayer", "esri/widgets/Legend", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/widgets/Home"], function (esriConfig, Map, MapView, CSVLayer, Legend, SimpleMarkerSymbol, SimpleLineSymbol, Home) { esriConfig.apiKey = "API-KEY"; // POPUP TEMPLATE const popupTemplate = {title: "<b>{sitename}</b>", content: [{type: 'fields', fieldInfos: [{fieldName: "location", label: "Location"}, {fieldName: "latitude", label: "Latitude"}, {fieldName: "longitude", label: "Longitude"}, {fieldName: "elevation", label: "Elevation (ft.)"}, {fieldName: "dominant_species", label: "Dominant Species"}, {fieldName: "first_im_date", label: "First Image Taken"}, {fieldName: "last_im_date", label: "Most Recent Image Taken"},]}, {type: 'text', text: "<small>Last upadated {last_updated}</small>"}]}; // SYMBOLS AND RENDERER const greenOutline = {type: 'simple-line', color: [38, 115, 0, 1], width: 1.75}; var pathMarker = {type: "simple-marker", size: 22, outline: greenOutline, color: [56, 168, 0, 0.55], path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z"}; var renderer = {type: "simple", symbol: pathMarker, label: "Location of Site from Database"}; // LAYER var layer = new CSVLayer({ url: "https://link-to-csv.csv", renderer: renderer, title: "Phenology Analysis", popupTemplate: popupTemplate, fields: [new Field({name: 'sitename', alias: "Site", type: "string"})] }); // MAP and VIEW var map = new Map({basemap: "topo-vector", layers: [layer]}); var view = new MapView({map: map, center: [-84.3268, 38.0], zoom: 4, container: "viewDiv"}); // ADD UI ELEMENTS var legend = new Legend({view: view, layerInfos: [{layer: metaLayer, title: "Site Locations"}]}); view.ui.add(legend, "bottom-left"); view.ui.add(new Home({view: view}), "top-left"); }); </script> </body> </html>

Is there anything that might perhaps be causing this issue? It perplexes me since I hadn't changed any code when this first occurred, and since I have reverted to previous versions where this issue was not present, but even in those previous versions the issue is present.

Thank you for taking the time to look at my issue!

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

Anonymous User — Thu, 11 Feb 2021 12:51:25 GMT

What happens when you take out ! Important?

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

ReneRubalcava — Thu, 11 Feb 2021 16:03:17 GMT

I don't see a link to the esri css in your snippet, do you have it?

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

n8srumsey — Thu, 11 Feb 2021 16:34:24 GMT

Ah that it is it. I'm building the website using Django and for some reason Django was not rendering the content block that included that link. When I moved it out of the content block the CSS finally loaded. Thank you!

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

ATI_Dev_C — Fri, 12 Aug 2022 11:40:22 GMT

Thank you! Between two projects I'm working on, I thought I'd applied styling to both - but turns out I missed it on one.

In my project, missing the stylesheet import also caused issues with displaying normal zoom buttons, map attributions, and caused a very weird rendering issue with React where multiple maps would appear nested within the main map's div. Just wanted to add in case anyone else experienced that.

"dependencies": { "@arcgis/core": "^4.24.7", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@babel/core": "^7.18.9", "@babel/preset-env": "^7.18.9", "@babel/preset-react": "^7.18.6", "babel-loader": "^8.2.5", "css-loader": "^6.7.1", "html-webpack-plugin": "^5.5.0", "style-loader": "^3.3.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.3" }

topic Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv in ArcGIS JavaScript Maps SDK Questions

[UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

Re: [UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv