Ignored css overriding

Radzen.Blazor Components
1

Hello,
I try to change width Expand/Collapse column in DataGrid, but all my attempts are ignored. I use Radzen.Blazor 4.7.1, software-base.css theme.
I tried in app.css :
.rz-datatable.rz-col-icon
{
width: 16px;
}
also
.rz-datatable.rz-col-icon
{
width: 1rem !important;
}
and also
.rz-datatable.rz-col-icon {
--rz-grid-column-icon-width: 1rem !important;
}
Is there any way to override this width?

2

Hey @vlado,

Have you tried with a space between .rz-datatable and .rz-col-icon?

.rz-datatable .rz-col-icon {
    --rz-grid-column-icon-width: 1rem;
}
3

Yes, I tried with space and without too.

4

There should be a space, since these two css classes refer two different html elements. Also, make sure app.css is loaded after software-base.css.

Here is how it looks on my end, added red background to highlight.

image
image638×1508 56.4 KB

5

Something must be wrong on my side.
Fragment from index.html of my Blazor App is:

image
image992×159 30.8 KB

Piece of code:
.rz-datatable .rz-col-icon {
--rz-grid-column-icon-width: 10rem;
background-color: red !important;
}
I added to file app.css, then I tried placed it into page attached [page].razor.css file, which is compiled into GeomPlan.styles.css together with another attached .css files.
I don't know where is a problem.
I tried run app on MS Edge and Chrome too.
The effect has only if I change value of variable --rz-grid-column-icon-width directly in software-base.css

6

I think I have got it. I have to clone all parts/files from _content/Radzen.Blazor to my app wwwroot directory.