RadzenTextbox overflows inside FormField

Radzen.Blazor Components
1

RadzenTextBox overflows when placed is inside FormField.
Screenshot:

image
image801×272 3.99 KB

Minimal reproduction example:

<RadzenRow Style="width: 400px">
    <RadzenColumn Size="4">
        <RadzenFormField Style="width: 100%">
            <RadzenTextBox />
        </RadzenFormField>
    </RadzenColumn>
    <RadzenColumn Size="4">
        <RadzenFormField Style="width: 100%">
            <RadzenTextBox />
        </RadzenFormField>
    </RadzenColumn>
    <RadzenColumn Size="4">
        <RadzenFormField Style="width: 100%">
            <RadzenTextBox />
        </RadzenFormField>
    </RadzenColumn>
</RadzenRow>
2

Hi @Heorhi_Kupryianau,

That is because the column width is less that the default RadzenTextBox width. To fix it, either remove Style="width: 400px" of RadzenRow, or add Style="width: 100%" to RadzenTextBox as shown in the demos:

<RadzenFormField Style="width: 100%">
    <RadzenTextBox Style="width: 100%" />
</RadzenFormField>
3

Thank you for the response.

I tried <RadzenTextBox Style="width: 100%" /> and it works as expected, but I'm wondering if adding max-width: 100% to a RadzenTextBox css class wouldn't fix the problem?

4

Thanks @Heorhi_Kupryianau,

Will definitely try this and see how it behaves with the various config options of RadzenFormField. Currently working on another FormField related issue, and if all configuration options work with the proposed styling we will add it to this effort.

1 Like