search

radzenhq / radzen-blazor

Radzen Blazor is a set of 90+ free native Blazor UI components packed with DataGrid, Scheduler, Charts and robust theming including Material design and FluentUI.
https://www.radzen.com
MIT License
3.61k stars 807 forks source link

RadzenFileInput Layout issue when used in RadzenFormField #1716

Closed dave-gcv closed 1 month ago

dave-gcv commented 1 month ago

I have noticed that there is a layout problem when using the RadzenFileInput inside a RadzenFormField under certain conditions:

Set Variant="Variant.Flat" on the RadzenFormField

This causes the field label to conflict with the file choose button. This is reproducable on the the demo page: https://blazor.radzen.com/fileinput

<RadzenStack AlignItems="AlignItems.Center">
    <RadzenCard class="rz-m-0 rz-m-md-12" Style="width: 100%; max-width: 600px;">
        <RadzenFormField Text="File" Variant="Variant.Flat" AllowFloatingLabel="false" Style="width: 100%;">
        <RadzenFileInput @bind-Value=@photo @bind-FileName=@fileName @bind-FileSize=@fileSize TValue="byte[]" Style="width: 100%" 
            Change=@(args => OnChange(args, "FileInput")) Error=@(args => OnError(args, "FileInput")) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }})"/>
    </RadzenFormField>
    </RadzenCard>
</RadzenStack>

image

This seems similar to issue #1654

yordanov commented 1 month ago

@dave-gcv, RadzenFormField is not designed to accommodate this specific scenario, yet you can use <RadzenFileInput Style="width: 100%; --rz-upload-button-bar-padding: 2rem 0.5rem 0.5rem;" until we have a proper fix.