search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.3k stars 305 forks source link

fix: Column separator can get hidden when resizing columns in DataGrid #2058

Closed msb-incom closed 2 weeks ago

msb-incom commented 2 weeks ago

🐛 Bug Report

When resizing columns in a resizable DataGrid, the column separators can become hidden making it impossible to re-extend the columns without refreshing the page.

💻 Repro or Code Sample

This is reproducible in the samlples at https://www.fluentui-blazor.net/DataGrid

🤔 Expected Behavior

I would expect the separators to stay visible so I can always resize a column back to its original width.

image

😯 Current Behavior

When making a column narrower, I can do it to a point where the separator becomes invisible. Doing so will make me unable to re-size the column.

image

💁 Possible Solution

I believe this can be fixed by making the drag-handle sticky in its position.

🔦 Context

Possible bad user-experience when using the resizable columns feature of the DataGrid component.

🌍 Your Environment

vnbaaij commented 2 weeks ago

If you have a concrete solution that we can implement, that would be great. I was not able to get it fixed. PR provided.

With one of the latest releases we introduced resizing per keyboard. + and - will increase/decrease focused column width in steps of 10 pixels. More importantly in your case, Shift+r will reset all widths to their default initial value. No need to refresh the page!

msb-incom commented 2 weeks ago

Hi @vnbaaij Thanks for the shortcut tip! Wasn't aware 🙏 I submitted a PR that I believe fixes the issue. I'm no master of CSS, so I'm not entirely aware of other consequences it might bring, but I couldn't find any issues 🙂

vnbaaij commented 2 weeks ago

Will test with your PR. Thanks

vnbaaij commented 2 weeks ago

PR merged. Will be in next release