Measurement Widget CSS

MichaelRutkowski

In the JSAPI, we are allowed access to alter the icon for the area, distance, and location buttons within the measurement widget. However, I can't change the active, or hover states of the icons.

The active state, has a rounded border, and a white background. I can't seem to change/override the css for these two states. Is there a way to do this? The current widget buttons do not fit within my UI design, and these are the only pieces that are causing me trouble.

I think I've located the css in the debugger, but I can only alter it in the debugger and not the :

.esriButtonChecked .dijitButtonNode {

background-color: white !important

color: black !important;

border: none;

background: #ededed url("../dijit/images/button-active.png") bottom repeat-x !important;

}

Note: I want to override this style, because I want to leverage the esri/dojo libraries from the CDN.

Thank you,

Mike

khutchins

Check out the Basic Viewer template for an example of modifying the icons (and hover state) for the measurement widget.  See this demo app for an example:

http://www.arcgis.com/apps/Viewer/index.html

The css can be found around line 236 of styles.css in the Esri/Viewer · GitHub repo.

.esriMeasurement .areaIcon {

  background-image: url(../images/area_measure.png);

  width: 28px;

  height: 28px; }

.esriMeasurement .distanceIcon {

  background-image: url(../images/dist_measure.png);

  width: 28px;

  height: 28px; }

.esriMeasurement .locationIcon {

  background-image: url(../images/dist_point.png);

  width: 28px;

  height: 28px; }

.esriMeasurement .esriButtonHover .dijitButtonNode {

  background: #a9a9a9; }

.esriMeasurement .esriButtonChecked .dijitButtonNode {

  background: #a9a9a9; }

.no-touch .esriMeasurement .esriButton .dijitButtonNode:hover {

  background: #a9a9a9; }

.locationIcon {

  width: 32px;

  height: 32px; }