Hard to customize font-size for gantt charts

[fabiospampinato]

The default themes set a default font-size:

https://github.com/knsv/mermaid/blob/7d3578b31aeea3bc9bbc618dcda57d82574eaffb/src/themes/gantt.scss#L78

But if I override that via the settings then a font-size attribute gets added to the text element, but the CSS has the priority here and my setting is not used:

Basically the font-size becomes unless.

I think the selector should include a :not([font-size]), so that the property doesn't get overridden.

[fabiospampinato]

I'm using the following workaround:

 .mermaid text[font-size="14"] { 
   font-size: 14px !important; 
 } 

It's pretty ugly and will break at the first chance, but it in some cases it leads to better results.

I think the other text on the chart should scale accordingly with the set fontSize, which I don't think it's the case currently.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fabiospampinato]

@knsv can you label this issue so that the stupid bot won't close it?

[light0x00]

i have the same problem!

[IOrlandoni]

Classified as a bug. I assumed the behaviour was not intentional.

[KoljaTM]

I have trouble reproducing this bug, could you give me an example?
fwiw, I was able to change the text size in a gantt chart with the themeCSS parameter
https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiICAgIGdhbnR0XG4gICAgICB0aXRsZSBFeGNsdXNpdmUgZW5kIGRhdGVzIChNYW51YWwgZGF0ZSBzaG91bGQgZW5kIG9uIDNkKVxuICAgICAgZGF0ZUZvcm1hdCBZWVlZLU1NLUREXG4gICAgICBheGlzRm9ybWF0ICVkXG4gICAgICBzZWN0aW9uIFNlY3Rpb24xXG4gICAgICAgMiBEYXlzOiAxLCAyMDE5LTAxLTAxLDJkXG4gICAgICAgTWFudWFsIERhdGU6IDIsIDIwMTktMDEtMDEsMjAxOS0wMS0wMyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwidGhlbWVDU1MiOiIudGFza1RleHQgeyBmb250LXNpemU6MTRweDsgfSJ9fQ

Is that not what you were looking for or did you run into problems with the specificity of the css styles? In my browser (Chrome) the themeCSS overrides the default from gantt.sccs, although both have the same selectors, so I guess it's loaded later.

[fabiospampinato]

@KoljaTM This is about the "gantt.fontSize" setting, no the "themeCSS" setting. Here you go.

[KoljaTM]

I added the :not([font-size]) to the theme scss, but if you now want to overwrite the theme property, you will have to use something like

      "themeCSS": ".taskText:not([font-size]), .taskText[font-size] { font-size:8px; }",

do reach a higher specificity

[jgreywolf]

Is this still an issue after the commit mentioned above?