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

Missing or broken borders of DataGrid header and footer cells #1695

New Issue
Open
opened 2026-01-29 17:57:24 +00:00 by claunia · 1 comment
claunia commented 2026-01-29 17:57:24 +00:00
Owner
Copy Link

Originally created by @Cosmatevs on GitHub (Mar 31, 2025).

Describe the bug
Vertical borders of DataGrid header and footer cells disappear or render incorrectly depending on the page width.
Affected themes: Default, Humanistic, Software, Standard and their dark counterparts.
This happens on Edge and Chrome. Doesn't happen on Firefox.
Browser or display scaling doesn't matter.

To reproduce

  1. Go to a DataGrid demo.
  2. Select one of the themes mentioned above.
  3. Change the browser width slightly. Do not make the table so narrow that a scroll bar appears.
  4. As you change the width, observe how some borders of header and footer cells disappear, break or appear as intended.

Expected behavior
Header and footer borders should be rendered consistently, similar to table body borders.

Screenshots
Image

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser Edge
  • Version 134.0.3124.93

Additional context
3ce4f8da3a/Radzen.Blazor/themes/components/blazor/_grid.scss (L1123C45-L1123C46)
3ce4f8da3a/Radzen.Blazor/themes/components/blazor/_grid.scss (L1070C1-L1080C2)
It looks like removing the stickiness from the td and th styles fixes this bug. Hovewer, sometimes the borders of some header and footer cells are still 1 pixel off.
I think this can cause other problems though. That's why it's not a pull request.

Originally created by @Cosmatevs on GitHub (Mar 31, 2025). **Describe the bug** Vertical borders of DataGrid header and footer cells disappear or render incorrectly depending on the page width. Affected themes: Default, Humanistic, Software, Standard and their dark counterparts. This happens on Edge and Chrome. Doesn't happen on Firefox. Browser or display scaling doesn't matter. **To reproduce** 1. Go to [a DataGrid demo](https://blazor.radzen.com/datagrid-footer-totals?theme=humanistic). 2. Select one of the themes mentioned above. 3. Change the browser width slightly. Do not make the table so narrow that a scroll bar appears. 4. As you change the width, observe how some borders of header and footer cells disappear, break or appear as intended. **Expected behavior** Header and footer borders should be rendered consistently, similar to table body borders. **Screenshots** ![Image](https://github.com/user-attachments/assets/7ee33abb-6d63-470e-b283-c43bc5acea44) **Desktop (please complete the following information):** - OS: Windows 11 - Browser Edge - Version 134.0.3124.93 **Additional context** https://github.com/radzenhq/radzen-blazor/blob/3ce4f8da3a7153947390df6a777b9a9054a820c2/Radzen.Blazor/themes/components/blazor/_grid.scss#L1123C45-L1123C46 https://github.com/radzenhq/radzen-blazor/blob/3ce4f8da3a7153947390df6a777b9a9054a820c2/Radzen.Blazor/themes/components/blazor/_grid.scss#L1070C1-L1080C2 It looks like removing the stickiness from the `td` and `th` styles fixes this bug. Hovewer, sometimes the borders of some header and footer cells are still 1 pixel off. I think this can cause other problems though. That's why it's not a pull request.
claunia commented 2026-01-29 17:57:25 +00:00
Author
Owner
Copy Link

@yordanov commented on GitHub (Apr 1, 2025):

Related thread - https://forum.radzen.com/t/border-disappears-when-zooming-in/20062

Some additional notes:

The issue is reproducible with all themes. Here is a screenshot of Material theme:

Image

In some browser zoom levels the border might disappear completely:
Image

@yordanov commented on GitHub (Apr 1, 2025): Related thread - https://forum.radzen.com/t/border-disappears-when-zooming-in/20062 Some additional notes: The issue is reproducible with all themes. Here is a screenshot of Material theme: <img width="909" alt="Image" src="https://github.com/user-attachments/assets/14c64370-3998-4432-b928-d1e4a0774bdd" /> In some browser zoom levels the border might disappear completely: ![Image](https://github.com/user-attachments/assets/96f91155-b68f-40ee-a6ea-5e62151a381a)
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#1695
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?