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

[KellyHutchins · Accepted solution]

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

[MichaelRutkowski]

This worked for me. Thanks!

[KenBuja]

You should remember to mark Kelly's answer as the answer.

Also, you should move this discussion to the JavaScript space to help those who are searching on this topic in the future.

[MichaelRutkowski]

Thanks Ken.

[veenahosur1]

i need to change font color of dropdown.

how can i change it

[RobertScheitlin__GISP]

Veena,

  Here is what works for me:

.dijitPopup.dijitMenuPopup .unitDropDown.dijitMenuItem{
  color: red;
}

[veenahosur1]

thank you its work for me