starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

RadzenFileInput Layout issue when used in RadzenFormField #1411

New Issue
Closed
opened 2026-01-29 17:53:20 +00:00 by claunia · 1 comment
claunia commented 2026-01-29 17:53:20 +00:00
Owner
Copy Link

Originally created by @dave-gcv on GitHub (Sep 30, 2024).

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

Originally created by @dave-gcv on GitHub (Sep 30, 2024). 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](https://github.com/user-attachments/assets/394fd7c1-cf87-454f-9461-04326d1b1342) This seems similar to issue #1654
claunia commented 2026-01-29 17:53:21 +00:00
Author
Owner
Copy Link

@yordanov commented on GitHub (Sep 30, 2024):

@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.

@yordanov commented on GitHub (Sep 30, 2024): @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.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1411
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?