Newbie question on Data Grid row height

Is it possible to decrease the font-size and row height for the data grid? I would like to increase the visual density for data tables in general., In this case for a blazor server-side configuration.

Hi Dennis,

The easiest way to do this at the moment is to put server/Pages/_Host.cshtml in application ignore list

and add simple CSS rule to style DataGrid cells:

<head>
    ...
    <style type="text/css">
    .ui-datatable td
    {
        padding: 0px;
    }
    </style>
</head>

The result will be:

We will improve CSS customization in the future to work without ignoring any pages.

Best Regards,
Vladimir

Hi Dennis,

Just to let you know that with the next release you will be able to add additional CSS rules without any ignores using wwwroot/assets/css/styles.css:

Best Regards,
Vladimir

1 Like

thank you! Works perfectly.

it works with

.rz-datatable td
{
    padding: 10px;
}

now

1 Like

Setting padding to 0 works fine but even if I use RowRender and set a custom css class to every row in the data grid to override the default height, it doesn't work.


image

Any suggestion?

Hi team,

I have tried this but its not working on my side , not sure why. Some help will be appreaciated.
My scrollbars are also not visible though i can scroll

Any ideas on my query?

1 Like