[PR #1715] [MERGED] Fixed the width of input tags inside RadzenFormFields that exceeded their parent's border #2871

New Issue

claunia · 2026-01-29T18:20:50Z

claunia commented

2026-01-29 18:20:50 +00:00

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/1715
Author: @AntoGagne
Created: 9/27/2024
Status: ✅ Merged
Merged: 9/30/2024
Merged by: @enchev

Base: master ← Head: input-in-formfield-width-fix

📝 Commits (2)

902ed1c Fixed input width in RadzenFormFields
babffce Merge branch 'radzenhq:master' into input-in-formfield-width-fix

📊 Changes

2 files changed (+8 additions, -4 deletions)

View changed files

📝 Radzen.Blazor/themes/components/blazor/_form-field.scss (+4 -0)
📝 RadzenBlazorDemos/Pages/FormFieldTextBox.razor (+4 -4)

📄 Description

This PR fixes a display problem with components that use input tags (such as RadzenTextBox and RadzenPassword) inside a RadzenFormField. When a RadzenFormField was used inside a RadzenColumn, the input inside could overflow the width of its parent. This occurred when the width of a RadzenFormField was reduced after it had been rendered, such as when the window was made smaller or when the navigation menu was shown.
For the example images, I temporarily changed the background colour of the children of the tag using the .rz-form-field-content class.

As you can see, when the screen width was reduced, the input tag made by the RadzenTextBox and RadzenPassword overflowed the border of their RadzenFormField parent.
This was not really visible when the background colour was not changed. However, when Chrome's autocomplete was used (which changes the background colour), this could cause the problem to appear. This happened a few times in some of our applications.
The problem was also even more visible when the End render fragment was used :

By forcing input tags inside a RadzenFormField to have a width of 100%, this ensures that they always take up all the width they can, even if it's smaller than the original width.

I didn't touch any other possible RadzenFormField content, as they didn't seem to have this problem. I've also changed the first RadzenFormField demo, since width: 100% no longer needs to be specified anymore (and which was accidentally fixing the problem before this fix).

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/1715 **Author:** [@AntoGagne](https://github.com/AntoGagne) **Created:** 9/27/2024 **Status:** ✅ Merged **Merged:** 9/30/2024 **Merged by:** [@enchev](https://github.com/enchev) **Base:** `master` ← **Head:** `input-in-formfield-width-fix` --- ### 📝 Commits (2) - [`902ed1c`](https://github.com/radzenhq/radzen-blazor/commit/902ed1c4fd5671ccaa008933044c014a2fd19a09) Fixed input width in RadzenFormFields - [`babffce`](https://github.com/radzenhq/radzen-blazor/commit/babffce0b7e80bb2ce43ab5c2941bfb0e372e440) Merge branch 'radzenhq:master' into input-in-formfield-width-fix ### 📊 Changes **2 files changed** (+8 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/themes/components/blazor/_form-field.scss` (+4 -0) 📝 `RadzenBlazorDemos/Pages/FormFieldTextBox.razor` (+4 -4) </details> ### 📄 Description This PR fixes a display problem with components that use `input` tags (such as `RadzenTextBox` and `RadzenPassword`) inside a `RadzenFormField`. When a `RadzenFormField` was used inside a `RadzenColumn`, the `input` inside could overflow the width of its parent. This occurred when the width of a `RadzenFormField` was reduced after it had been rendered, such as when the window was made smaller or when the navigation menu was shown. For the example images, I temporarily changed the background colour of the children of the tag using the `.rz-form-field-content` class. ![image](https://github.com/user-attachments/assets/c9e1145d-511e-4dc9-9e72-9390bd140429) As you can see, when the screen width was reduced, the `input` tag made by the `RadzenTextBox` and `RadzenPassword` overflowed the border of their `RadzenFormField` parent. This was not really visible when the background colour was not changed. However, when Chrome's autocomplete was used (which changes the background colour), this could cause the problem to appear. This happened a few times in some of our applications. The problem was also even more visible when the `End` render fragment was used : ![image](https://github.com/user-attachments/assets/24f2753f-c6f2-4938-912d-53fcb0e42f22) By forcing `input` tags inside a `RadzenFormField` to have a `width` of `100%`, this ensures that they always take up all the width they can, even if it's smaller than the original width. ![image](https://github.com/user-attachments/assets/e9b7ce15-fad1-4748-b713-c433ccf04ad9)![image](https://github.com/user-attachments/assets/ec435c25-1827-4941-a32b-4a546df60f44) I didn't touch any other possible `RadzenFormField` content, as they didn't seem to have this problem. I've also changed the first `RadzenFormField` demo, since `width: 100%` no longer needs to be specified anymore (and which was accidentally fixing the problem before this fix). --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

claunia added the pull-request label 2026-01-29 18:20:50 +00:00

claunia closed this issue

2026-01-29 18:20:50 +00:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2871