Scaling down a RadzenDropDown

Radzen.Blazor Components
1

I have a small css issue that I can't solve on my own.
In an RadzenRow I scaled down some inputs using

Style="--rz-input-font-size: 12px; --rz-numeric-button-width: 10px; --rz-numeric-button-height: 10px;--rz-input-height: 24px; width:60px;"

on a RadzenNumeric and

Style="--rz-colorpicker-value-border-radius: 2px; --rz-input-height: 24px; width:60px;"

on a RadzenColorPicker.

This looks ok, but I can't achieve the same effect for the content of the RadzenDropDown's ValueTemplate to align vertically.

Please see the attached screenshot.

This is my code right now:

<RadzenDropDown Data="@iconItems"
                TValue="IconItem"
                @bind-Value="@selectedIcon"
                AllowClear="true"
                Change="@(args => OnChange(args))"
                Style="--rz-dropdown-item-font-size:12px; --rz-input-height: 24px;  width:100px;">
    <Template Context="icon">
        <div class="dropdown-item">
            <RadzenIcon Icon="@icon.Icon" Style="--rz-icon-size: 12px;" />
        </div>
    </Template>
    <ValueTemplate Context="icon">
             <RadzenIcon Icon="@icon.Icon" Style="--rz-icon-size: 12px;" />
    </ValueTemplate>
</RadzenDropDown>

Could anybody please help me out?

Thanks and cheers!
rz-input-height

2

Hi @fuschnick,

You need to add --rz-input-font-size to RadzenDropDown as well. You can also set all the variable values on a parent level <RadzenRow Style="..." instead of setting per component.

3

Thank you @yordanov!
Also thanks for the extra tip with the parent level. That makes everything much more manageable.
If I may ask another question: Could you help me to also scale down the dropdown-clear-icon?
As always, your help is much appreciated.
Cheers!

4

You can use browser's devtools to find the needed CSS variable.

image
image2446×308 90.8 KB

5

Thank you,
with --rz-dropdown-trigger-icon-height:1.0rem; it looks nice now.
Cheers!