[PR #1958] [CLOSED] Form field: styling fixes and tweaks #2994

Open
opened 2026-01-29 18:21:26 +00:00 by claunia · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/1958
Author: @Cosmatevs
Created: 2/11/2025
Status: Closed

Base: masterHead: form-field-fixes-n-tweaks


📝 Commits (6)

  • 1725189 * DropDown, DropDownDataGrid, and DatePicker: standardize field icons
  • 3703e3b fix whitespace in DatePicker scss
  • e97db66 * rename rz-clear-icon to rz-clear-field-icon
  • 216172c DatePicker: fix AllowClear test
  • 3c2fde7 Merge branch 'master' into form-field-fixes-n-tweaks
  • 0248c9f DropDown: use proper dropdown trigger class

📊 Changes

11 files changed (+416 additions, -405 deletions)

View changed files

📝 Radzen.Blazor.Tests/DatePickerTests.cs (+1 -1)
📝 Radzen.Blazor/RadzenDatePicker.razor (+12 -10)
📝 Radzen.Blazor/RadzenDatePicker.razor.cs (+1 -0)
📝 Radzen.Blazor/RadzenDropDown.razor (+5 -5)
📝 Radzen.Blazor/RadzenDropDownDataGrid.razor (+5 -6)
📝 Radzen.Blazor/themes/_css-variables.scss (+4 -0)
📝 Radzen.Blazor/themes/components/blazor/_datepicker.scss (+16 -8)
📝 Radzen.Blazor/themes/components/blazor/_dropdown.scss (+6 -38)
📝 Radzen.Blazor/themes/components/blazor/_form-field.scss (+328 -333)
📝 Radzen.Blazor/themes/components/blazor/_utilities.scss (+35 -1)
📝 RadzenBlazorDemos/Pages/FormFieldInputTypes.razor (+3 -3)

📄 Description

  • if a form field is a container element that has its own variant, this variant no longer affects the form field style, e.g. breaking placement of labels inside empty text areas: Moved to https://github.com/radzenhq/radzen-blazor/pull/2002
    misplaced textarea label
  • icons inside drop downs, drop down data grids, and date pickers behave more consistently for flat and filled variants:
    • if the field is empty, they're centered vertically towards the whole field,
    • otherwise, they are centered verticaly towards the value, effectively going down.
      Current setup:
      Current form field icons
      New setup:
      More consistent form field icons

I hope the new setup will make it easier to implement clear and other action buttons in other field components.


🔄 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/1958 **Author:** [@Cosmatevs](https://github.com/Cosmatevs) **Created:** 2/11/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `form-field-fixes-n-tweaks` --- ### 📝 Commits (6) - [`1725189`](https://github.com/radzenhq/radzen-blazor/commit/1725189476171a3a604f8faf489a56adcfdb272b) * DropDown, DropDownDataGrid, and DatePicker: standardize field icons - [`3703e3b`](https://github.com/radzenhq/radzen-blazor/commit/3703e3ba5ac2f51bcda0f0a6ea752359843d0716) fix whitespace in DatePicker scss - [`e97db66`](https://github.com/radzenhq/radzen-blazor/commit/e97db66a09e33126f4a34a1a0d054c323d34e723) * rename rz-clear-icon to rz-clear-field-icon - [`216172c`](https://github.com/radzenhq/radzen-blazor/commit/216172c4405a1ecfc11fdc199627dde5e6ca322b) DatePicker: fix AllowClear test - [`3c2fde7`](https://github.com/radzenhq/radzen-blazor/commit/3c2fde79a6c9cb0964c75f57ff7be51f41bb565b) Merge branch 'master' into form-field-fixes-n-tweaks - [`0248c9f`](https://github.com/radzenhq/radzen-blazor/commit/0248c9ff89548a1e3844d1af9b338c57db3ea318) DropDown: use proper dropdown trigger class ### 📊 Changes **11 files changed** (+416 additions, -405 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor.Tests/DatePickerTests.cs` (+1 -1) 📝 `Radzen.Blazor/RadzenDatePicker.razor` (+12 -10) 📝 `Radzen.Blazor/RadzenDatePicker.razor.cs` (+1 -0) 📝 `Radzen.Blazor/RadzenDropDown.razor` (+5 -5) 📝 `Radzen.Blazor/RadzenDropDownDataGrid.razor` (+5 -6) 📝 `Radzen.Blazor/themes/_css-variables.scss` (+4 -0) 📝 `Radzen.Blazor/themes/components/blazor/_datepicker.scss` (+16 -8) 📝 `Radzen.Blazor/themes/components/blazor/_dropdown.scss` (+6 -38) 📝 `Radzen.Blazor/themes/components/blazor/_form-field.scss` (+328 -333) 📝 `Radzen.Blazor/themes/components/blazor/_utilities.scss` (+35 -1) 📝 `RadzenBlazorDemos/Pages/FormFieldInputTypes.razor` (+3 -3) </details> ### 📄 Description - ~if a form field is a container element that has its own variant, this variant no longer affects the form field style, e.g. breaking placement of labels inside empty text areas:~ Moved to https://github.com/radzenhq/radzen-blazor/pull/2002 ![misplaced textarea label](https://github.com/user-attachments/assets/709bafc6-d12a-4baa-8777-adc27cf04420) - icons inside drop downs, drop down data grids, and date pickers behave more consistently for flat and filled variants: - if the field is empty, they're centered vertically towards the whole field, - otherwise, they are centered verticaly towards the value, effectively going down. Current setup: ![Current form field icons](https://github.com/user-attachments/assets/0ad05bdd-58e1-401c-a1f0-34dc33ea6ab2) New setup: ![More consistent form field icons](https://github.com/user-attachments/assets/916af7ff-a6af-4a74-b9b9-cea1644cca0a) I hope the new setup will make it easier to implement *clear* and other action buttons in other field components. --- <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:21:26 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2994