Referencing CSS for infowindowlite

2775
4
Jump to solution
08-25-2015 07:42 PM
BenScott1
Occasional Contributor

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

0 Kudos
1 Solution

Accepted Solutions
SteveCole
Frequent Contributor

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

0 Kudos
4 Replies
TimWitt2
MVP Alum

Ben,

style.png

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

Tim

0 Kudos
BenScott1
Occasional Contributor

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>
0 Kudos
SteveCole
Frequent Contributor

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)); 
}
0 Kudos
BenScott1
Occasional Contributor

Thanks Steve that did the trick.