Radzen DatePicker Font Size

Question

Radzen has a datepicker for Blazor that looks promising. The code below displays it on my webassembly blazor page, however, I do not know how to control the font size with the Radzen component. I have tried adding height to the div, tried adding font-size to the div as well as the RadzenDatePicker style string. Nothing seems to change the rendered font size. If I inspect the resulting page.... I see the html that Radzen creates and I can adjust it there but not in my razor page. Any help appreciated.

        <div class="rz-p-0 rz-text-align-center">
            <RadzenDatePicker @bind-Value=@value ShowTime="false" HourFormat="12" Style="height:1.5vh;width:30%;" DateFormat="MM/dd/yyyy" />
        </div>

        @code {
            DateTime? value = DateTime.Now;
        }

How I go about customising Radzen components is editing their properties within — maciek, Feb 26 '23 at 16:39
Maciek, thank you for the comment. This is just what I thought I would try. What I find is that Radzen creates several nested
s during rendering the html and many elements of the style don't cascade down to the inner div where the font-size is. — Greg W, Feb 27 '23 at 04:20

score 0 · Answer 1 · answered Apr 25 '23 at 10:04

You can overwrite the values of Radzen. But the css file must be called after the Radzen.Blazor.js in your Layout.cshtml like this:

<script src="_content/Radzen.Blazor/Radzen.Blazor.js" />
<link href="css/site.css" rel="stylesheet" />

Here are some example values you can change, but the easiest thing is to inspect the elements and copy the values.

/*Datepicker-> Changes the fontsize of the date*/
.rz-calendar .rz-inputtext {
   font-size: 20px;
}

/*Popup-> Changes the fontsize of the dropdown selector (Month & Year)*/
.rz-dropdown {
   font-size: 20px;
}

/*Popup-> Changes the fontsize of the days*/
.rz-datepicker-calendar td .rz-state-default {
   font-size: 20px;
}

/*Popup -> Size of the box*/
.rz-datepicker.rz-popup {
   width: 360px !important;
   height: 500px;
}

/*Popup -> Size of the box*/
    .rz-datepicker.rz-popup {
       width: 360px !important;
       height: 500px;
}

Thanks for replying. Off doing some drag and drop code but will circle back and see how this answer works. Thanks again! — Greg W, May 23 '23 at 01:32

Radzen DatePicker Font Size

1 Answers1