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;

<div style="width:300px;height:150px;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:
http://www.awareim.com/forum/viewtopic.php?t=7169

Regarding how to find the CSS file and CSS class. In the screenshot you posted, you are probably looking at the left panel. Look at the right panel instead and try various settings and there you will at the same time see the CSS file and the CSS class the setting you are changing has. Take some time and play with it and you will figure it out, it´s quite easy once you understand how to do this.

[customaware]

In your step 4 Henrik,

4. 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]

In your step 4 Henrik,

4. 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]

In your step 4 Henrik,

4. 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?