topic Re: Referencing CSS for infowindowlite in ArcGIS JavaScript Maps SDK Questions

Referencing CSS for infowindowlite

BenScott1 — Wed, 26 Aug 2015 02:42:04 GMT

I have a simple javascript map using inforwindowlite for popups on data. The ArcGIS javascript guide mentions that you can style an inforwindowlite using css and provides example css code in https://developers.arcgis.com/javascript/jshelp/intro_customize.html I am a bit of a javascript newbie and I am struggling to work out how to reference that style in the javascript code itself. Can anyone provide an example of how to do this? The example css provided at the address above is as follows:

#map_infowindow.simpleInfoWindow {
    border: 2px solid #455268;
    background-color: #dfe5d7;
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead));

}

Many thanks,

Ben

Re: Referencing CSS for infowindowlite

TimWitt2 — Wed, 26 Aug 2015 12:35:32 GMT

Ben,

you put this in between your style section (the red box in the attachment).

Tim

Re: Referencing CSS for infowindowlite

BenScott1 — Sat, 11 Dec 2021 22:24:02 GMT

Yes but that doesn't work. If I take the example for using the infowindowlite (from Info Window Lite | ArcGIS API for JavaScript ) and paste it into the sandbox it works with the default style. If I then add the extra css style as per below the style of the info window doesn't change from the default, which leads me to wonder if there is some way you have to reference the style when constructing the infowindowlite in the javascript code.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->


    <title>Info Window Lite</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #mapDiv { height: 100%; margin: 0; padding: 0; }
      #map_infowindow.simpleInfoWindow {
        border: 2px solid #455268;
        background-color: #dfe5d7; 
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); 
      }
    </style>


    <script src="http://js.arcgis.com/3.14/"></script>
    <script>


      require([
        "esri/map", 
        "esri/dijit/InfoWindowLite",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/dom-construct",
        "dojo/domReady!"
      ], function(
          Map,
          InfoWindowLite,
          InfoTemplate,
          FeatureLayer,
          domConstruct
         ) {


        var map = new Map("mapDiv", {
          basemap: "topo",
          center: [-98.416, 39.781],
          zoom: 6
        });


        var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);


        var template = new InfoTemplate();
        template.setTitle("<b>${STATE_NAME} - ${STATE_ABBR}</b>");
        template.setContent("${STATE_NAME} is in the ${SUB_REGION} sub region.");


        //add a layer to the map
        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["STATE_NAME" , "SUB_REGION", "STATE_ABBR"]
        });
        map.addLayer(featureLayer);


        map.infoWindow.resize(200, 75);


      });
    </script>
  </head>
  
  <body>
    <div id="mapDiv"></div>
  </body>


</html>

Re: Referencing CSS for infowindowlite

SteveCole — Sat, 11 Dec 2021 22:24:04 GMT

Ben, remove the #map_infowindow part from that CSS snippit. It should just be this:

.simpleInfoWindow { 
border: 2px solid #455268; 
background-color: #dfe5d7;  
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); 
}

Re: Referencing CSS for infowindowlite

BenScott1 — Wed, 26 Aug 2015 23:13:19 GMT

Thanks Steve that did the trick.