In NG1 I use the root pseudo class to define globally applied variables, like
:root {
--selectedRowColor: #e9f2fd !important;
}
In NGTi, the variables are not recognised when defining it like this. Neither works :host.
Is it may be not yet supported in Servoy Developer 202206 which I am using?
Regards,
Anyone using css variables for NGTi? Any info if it is working is very much appreciated.
Regards,
I would like to ask again, if anyone could give a hint how to get CSS variables work in the NGTi stylesheet?
Hi Robert,
This should be supported following the basic instructions for CSS variables:
https://developer.mozilla.org/en-US/doc … properties
For example, to declare it in the root:
:root {
--my-custom: red;
}
Then to use it
.my-selector
{
background-color: var(--my-custom);
}
Hi Sean
Thanks for your answer. That’s exactly what we have specified in the less file, but it doesn’t work in NG2 (NGTi). It works perfectly in NG1.
Servoy Developer 202303_LTS
Hi Robert,
It works for me in 2023.6. I’m not sure if that is because of a version difference.
Just to rule out anything obvious, can you double check that you have entered your variable in the _ng2.less file of the solution (or one that is included in it) ?
(i.e. not just the default which is currently ng1 only)
Best,
Sean
Hi Sean
We have a Modul called HadesBasics which contains a HadesBasics_ng2.less file in a sub folder called styles of the node Media. There we have the selectors to style NG2. These work as expected, except for the variables defined in
:root {
--border: 1px solid #f0f0f0;
--borderDark: 1px solid #e3e3e3;
--borderBottomX: 1px solid #ff0000;
--hoveredRowColor: #f3f9ff;
--readOnlyColor: #999;
--selectedRowColor: #e9f2fd !important;
--7rGreen: #8DC43F;
--darkGrey: #a4998a;
--green: #8DC43F;
--grey: #fcfcfc;
--orange: #ffa500;
--red: #f00;
--white: #fff;
}
and the selector
.ag-theme-bootstrap .ag-row-selected {
/* background-color: #e9f2fd !important;*/
background-color: var(--selectedRowColor);
}
The selector works for the background color with the line in comments, i. e. (/* background-color: #e9f2fd !important;*/), but not with the line containing the variable.
Servoy Developer 2022.03, and 2023.03 LTS
Hi Robert,
css variables to style the grid are also used in the Servoy Theme. Therefore i don’t see why they should not work.
However in TiNG the ag-theme-bootstrap is not present anymore and is normally replaced by ag-theme-alpine. Can this be the problem for you ? Since you rely on the ag-theme-bootstrap selector.
By the way, there are several CSS variables that you can directly use in TiNG to style some aspect of the grid.
Example below:
.ag-theme-servoy {
–ag-alpine-active-color: #2196f3;
–ag-selected-row-background-color: rgba(33, 150, 243, 0.3);
–ag-row-hover-color: rgba(33, 150, 243, 0.1);
–ag-column-hover-color: rgba(33, 150, 243, 0.1);
–ag-input-focus-border-color: rgba(33, 150, 243, 0.4);
–ag-range-selection-background-color: rgba(33, 150, 243, 0.2);
–ag-range-selection-background-color-2: rgba(33, 150, 243, 0.36);
–ag-range-selection-background-color-3: rgba(33, 150, 243, 0.49);
–ag-range-selection-background-color-4: rgba(33, 150, 243, 0.59);
–ag-background-color: #fff;
–ag-foreground-color: #181d1f;
–ag-border-color: #babfc7;
–ag-secondary-border-color: #dde2eb;
–ag-header-background-color: #f8f8f8;
–ag-tooltip-background-color: #f8f8f8;
–ag-odd-row-background-color: #fcfcfc;
–ag-control-panel-background-color: #f8f8f8;
–ag-subheader-background-color: #fff;
–ag-invalid-color: #e02525;
–ag-checkbox-unchecked-color: #999;
–ag-checkbox-background-color: var(–ag-background-color);
–ag-checkbox-checked-color: var(–ag-alpine-active-color);
–ag-range-selection-border-color: var(–ag-alpine-active-color);
–ag-secondary-foreground-color: var(–ag-foreground-color);
–ag-input-border-color: var(–ag-border-color);
–ag-input-border-color-invalid: var(–ag-invalid-color);
–ag-input-focus-box-shadow: 0 0 2px 0.1rem var(–ag-input-focus-border-color);
–ag-disabled-foreground-color: rgba(24, 29, 31, 0.5);
–ag-chip-background-color: rgba(24, 29, 31, 0.07);
–ag-input-disabled-border-color: rgba(186, 191, 199, 0.3);
–ag-input-disabled-background-color: rgba(186, 191, 199, 0.15);
–ag-borders: solid 1px;
–ag-border-radius: 3px;
–ag-borders-side-button: none;
–ag-side-button-selected-background-color: transparent;
–ag-header-column-resize-handle-display: block;
–ag-header-column-resize-handle-width: 2px;
–ag-header-column-resize-handle-height: 30%;
–ag-grid-size: 6px;
–ag-icon-size: 16px;
–ag-row-height: calc(var(–ag-grid-size) * 7);
–ag-header-height: calc(var(–ag-grid-size) * ;
–ag-list-item-height: calc(var(–ag-grid-size) * 4);
–ag-column-select-indent-size: var(–ag-icon-size);
–ag-set-filter-indent-size: var(–ag-icon-size);
–ag-cell-horizontal-padding: calc(var(–ag-grid-size) * 3);
–ag-cell-widget-spacing: calc(var(–ag-grid-size) * 2);
–ag-widget-container-vertical-padding: calc(var(–ag-grid-size) * 2);
–ag-widget-container-horizontal-padding: calc(var(–ag-grid-size) * 2);
–ag-widget-vertical-spacing: calc(var(–ag-grid-size) * 1.5);
–ag-toggle-button-height: 18px;
–ag-toggle-button-width: 28px;
–ag-font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;
–ag-font-size: 13px;
–ag-icon-font-family: agGridAlpine;
–ag-selected-tab-underline-color: var(–ag-alpine-active-color);
–ag-selected-tab-underline-width: 2px;
–ag-selected-tab-underline-transition-speed: 0.3s;
–ag-tab-min-width: 240px;
–ag-card-shadow: 0 1px 4px 1px rgba(186, 191, 199, 0.4);
–ag-popup-shadow: var(–ag-card-shadow);
–ag-side-bar-panel-width: 250px;
}
Hi Paulo
For the NG2, I replaced the selectors containing bootstrap with alpine, but I have still no success by using variables. Setting directly a color for example works though.
Thanks for the list of CSS variables. Do I understand you correctly that we can use these variables without having a corresponding selector. i. e. for example instead of using the selector
.ag-theme-alpine .ag-row-selected {
background-color: #f00;
}
I just can set
.ag-theme-servoy {
--ag-selected-row-background-color: #f00);
}
Hi Robert,
i tried in TiNG ( 2023.3 ) to use your original variable with the alpine class and works as expected.
:root {
--selectedRowColor: #f00 !important;
}
.ag-theme-alpine .ag-row-selected {
background-color: var(--selectedRowColor);
}
The ag-theme-alpine is now the default in TiNG; you can of course change that by changing the default styleClass of the table.
It very much depends on your grid’s styleClass property which you can fully control.
ag-theme-servoy is a selector used by the Servoy Less Theme which allow a certain level of customizations ( https://wiki.servoy.com/pages/viewpage. … d=31752222 ); note that the Servoy Theme does not affect only the grid but affects all the common Servoy elements.
Also to use the CSS from the grid, much depends from the styleClass selector your grid has in use.
This also works for me ( using the defaul styleClass )
.ag-theme-alpine {
--ag-selected-row-background-color: #f00 !important;
}
Regards,
Paolo
Hi Paolo, hi Sean
Thank you both for your support. I found that the behaviour I described in this thread is caused by importing the “custom_servoy_theme_properties_ng2.less” file into our HadesBasics_ng2.less file (solution is HadesBasics).
I was of the opinion, that the styles defined in our HadesBasics_ng2.less would override the style definitions of the imported “custom_servoy_theme_properties_ng2.less” file.
This seems not to be the case. For example, the color set in “Table row selected bg color” of the “Table Properties” in the “custom_servoy_theme_properties_ng2.less” file is NOT overridden by
:root {
--selectedRowColor: #f00 !important;
}
.ag-theme-alpine .ag-row-selected {
background-color: var(--selectedRowColor);
}
Interestingly, the selector
.ag-theme-alpine {
--ag-selected-row-background-color: #f00 !important;
}
in the HadesBasics_ng2.less file DOES override the “Table row selected bg color” of the “Table Properties”.
Does that mean one can’t/should not combine styles set in “custom_servoy_theme_properties_ng2.less” and self defined styles in a _ng2.less file?
Hi Robert,
it is possible to combine your own style with the “custom_servoy_theme_properties_ng2.less”.
However you have to keep in mind that since the custom_servoy_theme_properties_ng2 comes with his styles & rules, the applied color depends on the rule Specificity ( https://developer.mozilla.org/en-US/doc … pecificity ).
In your setup, the rule
:root {
--selectedRowColor: #f00 !important;
}
.ag-theme-alpine .ag-row-selected {
background-color: var(--selectedRowColor);
}
have a lowe specificity compared to the Rules coming from the theme and compared to:
.ag-theme-alpine {
--ag-selected-row-background-color: #f00 !important;
}
To investigate which rule is applied to the element you can use the Dev Tools of the Browser ( e.g. Chrome Inspector ) which shows all the CSS rules applied to an html element, sorted by specificity.
Regards,
Paolo
Hi Paolo
Thanks for the info and link about the rule specificity, which clarifies some of the problems described.
Reading further about CSS, we moved the variables and selectors in the HadesBasics_ng2.less file into a separate CSS file and imported that file into our HadesBasics_ng2.less file. Now, the variables got visible (in the Safari or Chrome inspector) and work as expected. I am not quite sure why it works this way, but it does.
The content of the HadesBasics_ng2.less file now consists of only 2 import statements
@import 'custom_servoy_theme_properties_ng2.less?t=##last-changed-timestamp##"';
@import 'hadesNG2.css?t=##last-changed-timestamp##"';
If there is an explanation for this, I am very interested in it of course.
Thanks,
Hi Robert,
the order of rules and imported files has also impact on the specificity. If 2 rules with the same specificity are set, the last rule will be applied.
Therefore is the custom_servoy_theme_properties_ng2.less and the hadesNG2.css use the same rule:
// just as example, assuming this rule exists in custom_servoy_theme_properties_ng2.less
.ag-theme-alpine {
--ag-selected-row-background-color: green !important;
}
// your rule in hadesNG2
.ag-theme-alpine {
--ag-selected-row-background-color: #f00 !important;
}
since they both have the same specificity ( .ag-theme-alpine ) the last one, in order, will be applied as result.
So if you changed the order of rules/import in your HadesBasics_ng2, that would have an impact.
As the import is exact at the same position where the definitions of variables (…root { }) followed by the selectors in HadesBasics_ng2 started, made me think how can that be? I still assume importing a file with variables and selectors at the same position where otherwise (the same) definitions start in the file should lead to the same result, as order of rules and specificity is the same (wether the definitions are in a separate file or directly in the file). But that’s not true, somewhere is a difference.