Reducing the height/Size of RadzenFormField

Radzen.Blazor Components
1

image
How can i reduce the height/size of the formfield its my first time using this components. My code is as below

<RadzenRow AlignItems="AlignItems.End" Wrap="FlexWrap.Wrap" Gap="1rem">
    <RadzenColumn Size="6">
        <RadzenFormField Text="Search">
            <End>
                <RadzenIcon Icon="search" />
            </End>
            <ChildContent>
                <RadzenTextBox  />
            </ChildContent>
        </RadzenFormField>
    </RadzenColumn>
    <RadzenColumn Size="3">
     
    </RadzenColumn>
    <RadzenColumn Size="3">

    </RadzenColumn>
</RadzenRow>
2

Hi @Manmohabe,

The height of the FormField depends on the size of its contents.

FormFieldHeight

In your case you'd need to decrease the height/line-height of RadzenTextBox and RadzenIcon.

You can do that by adjusting the values of the following css variables:

:root {
    --rz-input-height: 32px;
    --rz-icon-size: 16px;
}

If you need to scope the styles to this specific formfield, set a css class to RadzenFormField and replace :root with it. e.g.

.search-form-field { 
...
}

Also, Outlined or Text variants have smaller height due to the label overlaying the top FormField border.

3

Thanks very much for your prompt reply.