fix: FluentDataGrid with ResizableColumns allows sortable column resize handle to be covered by adjacent column header about fluentui-blazor HOT 7 CLOSED

A fix for this will be in the next release. See #2059.

Also, if resizing ever gets messed up oy you just want a reset without reloading the page, shift+r key combo will reset to original layout and column sizes.

from fluentui-blazor.

@vnbaaij I do not believe this is a duplicate. The fix for the similar issue was just CSS, so I copied the change from c23f893 into my app.css. I also added background-color: red to confirm that my changed CSS was matching the correct elements, which it was.

.col-width-draghandle {
    height: auto;
    width: calc(var(--design-unit) * 1px + 2px);
    right: calc(var(--col-gap)/2 - 0.5rem);
    border-top: none;
    border-left: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
    cursor: col-resize;
    position: sticky;
    background-color: red;
}

This does not solve the problem specifically affecting PropertyColumn. I'll write a SSCCE.

from fluentui-blazor.

Aha! It isn't PropertyColumn, it's the column being sortable. Maybe the width of the sort direction indicator is not being accounted for.

@page "/grid"

<FluentDataGrid Data="@Data" TGridItem="@Model" ResizableColumns="true">
	<PropertyColumn Property="@(o => o.Foo)" Sortable="true" />
	<PropertyColumn Property="@(o => o.Bar)" Sortable="false" />
	<PropertyColumn Property="@(o => o.Baz)" Sortable="true" />
</FluentDataGrid>

@code {
	private IQueryable<Model> Data =
		Enumerable.Empty<Model>().AsQueryable();

	public class Model
	{
		public int Foo { get; set; }
		public int Bar { get; set; }
		public int Baz { get; set; }
	}
}

Shift-R does nothing for me.

from fluentui-blazor.

Ok, I'll remove the label. Let's dive in deeper.

from fluentui-blazor.

I fixed it locally by adding to .col-with-draghandle

min-width: calc(var(--design-unit) * 1px + 2px);

Also found a small inconsistency through this in the height of the non-sortable column; the 'bar' column header is not the same height as the other ones:

So in FluentDataGridCell.razor.css I added: height: 100%;

With these changes, the resize bar stays in view and is useable, even if a column is resized really small.

(the Shift-R only works if a header has focus)

Would be great if you can confirm.

from fluentui-blazor.

@vnbaaij The resize bar is usable, but only barely. It narrows to 1 pixel in width, becoming almost invisible and making it difficult to interact with.

This library is nowhere near production-ready.

from fluentui-blazor.

This library is nowhere near production-ready.

The .NET team decided on using this library to build the (GA released) Aspire Dashboard with. But sure, if you say so.

from fluentui-blazor.