Referencing CSS for infowindowlite

BenScott1 · ‎08-25-2015

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

SteveCole · ‎08-26-2015

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)); 
}

View solution in original post

TimWitt2 · ‎08-26-2015

Ben,

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

Tim

BenScott1 · ‎08-26-2015

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>

SteveCole · ‎08-26-2015

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)); 
}

BenScott1 · ‎08-26-2015

Thanks Steve that did the trick.