nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Measurement Widget

jaykapalczynski

I am using the example for the measure widget Measurement | ArcGIS API for JavaScript‌

I am taking it out of the Title pane and setting the color to white. ALTHOUGH the text on the drop down that denotes (Acres, Sq Ft etc) stays BLACK

How can I change that drop down text to WHITE

Thoughts?

<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>

#measurementDiv{

color: white;

}

Find more posts tagged with

Accepted answers

kenbuja

If I ever want to see the css and html for an object, I use Chrome's Developer tool called "Inspect Element" by right-clicking on an object.

In the example below, I inspected the text element and added a new color to the .dijitButtonText (highlighted in yellow) to change the color of the text.

All comments

jaykapalczynski

Thanks Ken....was able to see that now...very useful....

kenbuja

You have to make sure the mouse is directly over the object you want to inspect. Sometimes it's difficult to get the right object, depending on how everything is laid out.

jaykapalczynski

Im trying that with the Developer Tools and not getting to where you are....wonder what I am doing wrong

I thank you both for your thoughts....going to add that CSS, but really trying to figure out how you got to that in your image...I cant seem to get there.

kenbuja

Good catch, Tim!

TimWitt2

Ken,

I just realized that this will change the color of all button text.

Write it like this so only the button text for the measure will be changed:

   #measurementDiv .dijitButtonText {
        color: white;
    }

Tim

TimWitt2

Ken is right, with my code you will only change the color of the dropdown text, which you probably want to change as well.

kenbuja

If I ever want to see the css and html for an object, I use Chrome's Developer tool called "Inspect Element" by right-clicking on an object.

In the example below, I inspected the text element and added a new color to the .dijitButtonText (highlighted in yellow) to change the color of the text.

TimWitt2

Try this and see what it does:

 .dijitMenuItem TD{
        color: white;
    }

Hope this helps!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.