DataGrid css not working

Radzen Studio Blazor Server
1

I am trying to adjust the columns to all have overflow: visible and white-space: pre-wrap, but it doesn't appear to be working:

.myTitle {
    border: solid black 1px;
    background-color: #e6ecef;
    text-align: center;
}

.rz-sortable-column {
    overflow: visible;
    white-space: pre-wrap;
}

.rz-grid-table td .rz-cell-data {
    overflow: visible;
    white-space: pre-wrap;
}

But I get this:

image
image1614×328 38.7 KB

My css looks like this in the browser tools:

image
image667×917 35.3 KB

I know the other css code in the DataExport.razor.css file is working, though, because the code for the "Location" label is also in there, and it's working properly:

image
image1591×204 16.1 KB

I'm at a loss. Why isn't the css for the rz-cell-data working?

2

The cell data are inside a span, you might need to target this element. You might need to use also !important to overwrite the default cell styles from the theme.

4

This inline style tag is how I finally got it working:

<style>
    .myTitle {
        border: solid black 1px;
        background-color: #e6ecef;
        text-align: center;
    }

    .rz-grid-table td .rz-cell-data {
        overflow: visible !important;
        white-space: normal !important;
    }
</style>

It just won't work if I try to use CSS Isolation.