Changing Font for a Gauge

customaware

I am displaying a Gauge on my form which is fine by font for the scale is to big.

Can anyone suggest a way to make the font smaller please?

weblike

Hi,

Can you give a printscreen of the Gauge with which font you want to make smaller?

Try to use webdeveloper toolbar -> ccs style....and see from which css file this font is set...

customaware

Here is the Gauge.

You can notice that the font causes the upper end of the scale to be hidden.

I have found were the Gauge scale numbers are (see image below) but don't know how to override the font size.

weblike

Hi Mark,

That text is inside a <div> which has a style...

I have tried with clifton blue theme and IssueResolution sample app.

I have added to the style a font-size:8px;

You can play with css file and make your own classes .

Hope this helps.

customaware

Awesome!.

Where did you add that?

hpl123

Hi Mark,
You can probably use the latest override CSS fix I posted (see link below) to change these settings per form:

customaware

In your step 4 Henrik,

In the query where you want you new settings add:
"config.cls="myQueryHeaderClass";"

Where do you add it to the query?

I have tried adding to the script for the form, in init, after and both....no go
I have tried adding to Advanced on the Gauge control.....no go

hpl123

eagles9999 wrote
In your step 4 Henrik,

In the query where you want you new settings add:
"config.cls="myQueryHeaderClass";"

Where do you add it to the query?

I have tried adding to the script for the form, in init, after and both....no go
I have tried adding to Advanced on the Gauge control.....no go

If you need to change settings for components shown in a form, you add it to the advanced script of the form i.e. when opening the form from the config tool (open form from BO forms section and add the settings there in the first window that opens up when you open the form). I would suggest you test my exact steps in my post in a test form. You could for example install the CRM BS and test my exact settings in the bluebay.css file. This way you can see it work and take it / play with it from there.

PS: In my original post I forgot to add that you must use "!important" (like in the examples) to the new settings you wish to change.

hpl123

hpl123 wrote
eagles9999 wrote
In your step 4 Henrik,

In the query where you want you new settings add:
"config.cls="myQueryHeaderClass";"

Where do you add it to the query?

I have tried adding to the script for the form, in init, after and both....no go
I have tried adding to Advanced on the Gauge control.....no go

If you need to change settings for components shown in a form, you add it to the advanced script of the form i.e. when opening the form from the config tool (open form from BO forms section and add the settings there in the first window that opens up when you open the form). I would suggest you test my exact steps in my post in a test form. You could for example install the CRM BS and test my exact settings in the bluebay.css file. This way you can see it work and take it / play with it from there.

PS: In my original post I forgot to add that you must use "!important" (like in the examples) to the new settings you wish to change.

Sorry my mistake, you add it to the advanced script of the actual component you want to change (gauge I think in your case). If you for example want to change settings for a form query (references table of items), you add it to the advanced script (before render) of that query (not the form first window like i wrote in my last reply).

customaware

Ok... Here is what I have done. Obviously wrong but hoping someone can point out the error of my ways please.

Inspecting the Gauge control I see the code below. It seems the svg Gauge control in wrapped in a <div> as Weblike stated.

I can see the x-surface class and an inline style. It tells me the styles are in ext-all.css.

It would seem to me that the right place to add my additional font-size is to the inline style and I read that you can use div[style] to override but I don't know how to call that as a class name in the Advanced form.

Ok so I am guess we want to override x-surface so I add the following to the end ext-all.css file as follows...

Then in my app I add the line suggested by Henrik as follows....

Unfortunately it does not work and in fact the entire gauge control is missing....

I can smell the answer but just am not css savvy enough to nut it out.

Any help will earn many virtual beers.

hpl123

Hi Mark,
Just a quick note, in the advanced script you added the config with " and it should be without (that´s why the gauge isn´t displayed). You should write:

config.cls="myQueryHeaderClass";

Regarding the css file and class, I am not sure you have found the correct class (but not sure). I usually "Inspect element" to open browser tools and then activate/press all of the different code segments in the left panel which is related to the component I want to change (the browser highlights the component every code segment is refering to when you activate/press it). After that I look at each in the right panel and look for the setting I want to change and then I just test changing the setting in the right panel (which then reflects live in the application). The element style you refer to is not a CSS class but info about the settings active and these in turn come from a CSS class somewhere in the code segments below (or in another left panel cpde segment). Don´t know if this makes sence, trying to explain something I don´t know that well either but keep playing with it.

hpl123

Another thing, I haven´t tried this for cells of the gauge tyoe som not 100% sure it works but I think It should.

PS: If config.cls="myQueryHeaderClass"; doesn´t work try c.cls="myQueryHeaderClass";

customaware

Henrik,

No matter what I put in the Advanced form, the gauge does not get displayed.

Have tried every combination. 🙁

hpl123

One last thing, I see in your override class that you have seperated .mygauge and .x-surface with a comma, it whould not be there. It should be EXACTLY like the example i posted in the original post.

hpl123

Can you prepare a example BS for me with the gauge only and I can test some?

customaware

Yeah, I tried that Henrik previously.

Will prepare a bsv and send.

customaware

Here is the bsv Henrik.

I will also send privately.

Click Edit Gauge Value in top bar to edit the value in the RegularUser BO.
Use say, 340.

Then click Show Gauge on top bar.

henrik.bsv

hpl123

Hi Mark,
It´s possible and here´s how you do it:

Add the following with the font size you want to file ext-all.css (C:\AwareIM\Tomcat\webapps\AwareIM\ext-4.1.0\resources\css\ext-all.css):

.myGaugeClass .x-panel-body-default {font-size:8px !important; }

Add the following to the "Script" (initialization) option from the form layout window (i.e. not the advanced option in the gauge component but the "Script" button from where you insert, delete, work with etc. attributes on the actual form):

config.cls="myGaugeClass";

Reload application

customaware

Bingo!

Your a legend Henrik!

Thanx a heap.

Virtual Beer coming your way. 😉

hpl123

No problem and cheers 🙂