I am trying to change the line height of the Radzen Data Grid for the entire solution and not having any luck. I have found that I can do this if I add this style section directly to the .razor file, just under the using, rendermode, and inject statements.
<style> .rz-grid-table td, .rz-grid-table th { padding: 0.2rem; }</style>Oddly, creating a [page].razor.css and adding the style to that file does NOT work. It only works if I place the style tag directly into the .razor file.
I have tried adding the style to the app.css, but that is not working either. Here are the non-working settings in app.css:
/* Radzen Data Grid Settings */.rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(odd) > td { background-color: lightskyblue}.rz-grid-table td, .rz-grid-table th { padding: 0.2rem;}.ui-datatable tr td, .ui-datatable tr th { padding: 0.2rem;}Here is my app.razor file:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="/" /><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="integritystring" crossorigin="anonymous"><link rel="stylesheet" href="app.css" /><link rel="stylesheet" href="blahsite.styles.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" /><link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css" /><link rel="icon" type="image/png" href="favicon.png" /><HeadOutlet /></head><body><Routes /><script src="_framework/blazor.web.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="integritystring" crossorigin="anonymous"></script><script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script></body></html>Can someone please tell me what I'm doing wrong? Why can I only change the style by placing a style tag directly in the .razor file?