topic Measurement Widget CSS in ArcGIS JavaScript Maps SDK Questions

Measurement Widget CSS

MichaelRutkowski — Wed, 10 Sep 2014 20:12:46 GMT

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

Re: Measurement Widget CSS

KellyHutchins — Wed, 10 Sep 2014 20:25:04 GMT

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 {

width: 28px;

height: 28px; }

.esriMeasurement .distanceIcon {

width: 28px;

height: 28px; }

.esriMeasurement .locationIcon {

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

Re: Measurement Widget CSS

MichaelRutkowski — Wed, 10 Sep 2014 20:55:02 GMT

This worked for me. Thanks!

Re: Measurement Widget CSS

KenBuja — Wed, 10 Sep 2014 21:15:01 GMT

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.

Re: Measurement Widget CSS

MichaelRutkowski — Mon, 15 Sep 2014 17:34:18 GMT

Thanks Ken.

Re: Measurement Widget CSS

veenahosur1 — Thu, 04 Feb 2016 07:10:02 GMT

i need to change font color of dropdown.

how can i change it

Re: Measurement Widget CSS

RobertScheitlin__GISP — Sat, 11 Dec 2021 17:36:19 GMT

Veena,

Here is what works for me:

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

Re: Measurement Widget CSS

veenahosur1 — Fri, 05 Feb 2016 05:33:18 GMT

thank you its work for me