Increase the size of the result area widget measurement

[GilbertoMatos]

Hello!!

I need to increase the font size of the measurment widget results area, but I'm not finding it. I have already tried to create a new class in the css of the application theme, and to be as follows in the file widget.js, but it did not solve.

Thank you!
Gilberto.

[GilbertoMatos]

...

this.measurement = new Measurement(measurementJson, this.measurementDiv);
this.measurement.resultLabel = "resultLabel esriMeasurementResultLabel esriMeasurementResultLabelFontSize";

...

[RobertScheitlin__GISP · Accepted solution]

Gilberto,

   It is as simple as adding css rule to your apps theme common.css:

.esriMeasurement .esriMeasurementResultValue {
    padding: 5px;
    font-size: large;
}‍‍‍‍

[GilbertoMatos]

Perfect Robert!

It worked as I needed it.
Robert, in this file common.css, all the css that I include in it, will be the priority, that is, will replace what is predefined?

How do you know which class to include in the common.css file? Do you debug chrome? I ask you this, because I spend a lot of work figuring out where to make these small changes. Thanks to your help, I can solve it, but I need to understand the logic of business. Do you recommend reading about it?

Thanks again.
Gilberto.

[RobertScheitlin__GISP]

Gilberto,

   I just use Chrome debugging tools to inspect the dom element and find the elements class and if that widget does not have it's own css file that I can add to (like the Measurement widget) then you can just add your css rules to the themes common.css. I don't have any recommended reading on this, I just learnt by trial and error using the inspector.

Don't forget to mark your question as answered.

[GilbertoMatos]

Perfect Robert!

Thank you very much! I can learn a lot from your help.

Thank you!
Gilberto.