topic Re: Increase the size of the result area widget measurement in Web AppBuilder Custom Widgets Questions

Increase the size of the result area widget measurement

GilbertoMatos — Mon, 13 Feb 2017 17:54:19 GMT

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.

Re: Increase the size of the result area widget measurement

GilbertoMatos — Mon, 13 Feb 2017 17:55:17 GMT

...

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

...

Re: Increase the size of the result area widget measurement

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:37:01 GMT

Gilberto,

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

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

Re: Increase the size of the result area widget measurement

GilbertoMatos — Mon, 13 Feb 2017 18:51:23 GMT

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.

Re: Increase the size of the result area widget measurement

RobertScheitlin__GISP — Mon, 13 Feb 2017 19:03:37 GMT

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.

Re: Increase the size of the result area widget measurement

GilbertoMatos — Mon, 13 Feb 2017 19:07:37 GMT

Perfect Robert!

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

Thank you!
Gilberto.