fix: Cell height issue with 4.11.2 in FluentDataGrid

[JamesNK]

🐛 Bug Report

4.11.1:

4.11.2:

💻 Repro or Code Sample

Update dotnet/aspire#6840 to use 4.11.2 to see the issue

🤔 Expected Behavior

Consistent cell height.

😯 Current Behavior

Inconsistent cell height.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[ApacheTech]

I'm hitting this issue as well, made worse by adding button style FluentAnchor into a cell.

<FluentDataGrid GridTemplateColumns="1fr 100px 150px" TGridItem="RequiredTermsModel" Items="termsGroup.OrderBy(t => t.Description).AsQueryable()">
    <TemplateColumn Title="Name">
        <NavLink href="@($"/account/terms-and-conditions/{context.Name}")">@context.Description</NavLink> v@(context.Version)
    </TemplateColumn>
    <TemplateColumn Title="Agreed">
        @if (context.AgreedDate.HasValue)
        {
            <LocaleDate UtcValue="@context.AgreedDate.Value" Format="LocaleDate.DateFormat.DateOnly" />
        }
    </TemplateColumn>
    <TemplateColumn Title="Document">
        <FluentAnchor Href="@($"/download-terms/{context.Name}")" Appearance="Appearance.Accent">
            <FluentIcon Value="new Icons.Regular.Size24.DocumentPdf()" Color="Color.Fill" Slot="start" />
            View PDF
        </FluentAnchor>
    </TemplateColumn>
</FluentDataGrid>

If you add Multiline="true" to the grid, then it changes the hard-coded "height: XYZpx" style in the cells, to height: 100% but forces the text to be aligned at the top-left, not the centre-left.

If you remove the height: XYZpx; inline style from the cell (manually, as it's high-specicifity, in an isolated environment), the cells still don't align properly.

Also, all rows now have a border. I don't mind that, but there's no easy way to understand how to get rid of it, or change things at a row-level. The changelog says that RowClass is now obsolete. We're using Tailwind, FluentUI, and Vanilla CSS, for styling.

[vnbaaij]

Found the error. Will fix tonight and do a 4.11.3 release

Also, all rows now have a border. I don't mind that, but there's no easy way to understand how to get rid of it, or change things at a row-level. The changelog says that RowClass is now obsolete. We're using Tailwind, FluentUI, and Vanilla CSS, for styling.

I don't think anything has changed concerning the borders. For reference, look at 3.8 version at https://calm-sea-053fa6a03-archivesv3.westeurope.3.azurestaticapps.net/DataGrid

[ApacheTech]

It's definitely changed something. In 4.10, there were no borders at all between rows.

Purely by updating to 4.11.2, the table now has borders.

But, as a benefit, the font styles now work in Firefox. It's likely now just allowing default styles to apply themselves, so anything within either the FluentUI reset, or the Tailwind reset will be taking hold. It's just an interesting side-effect of the update. I brought it up mainly because it's difficult to understand how to change these things within a data grid, with so many properties overlapping each other.

For instance, I want multiline to be true, but I still want to align the cells within the rows to the centre-left of the grid cell.

[ApacheTech]

Still getting the same problem in 4.11.3

<FluentCard Class="h-fit p-4">
    <h2>@termsGroup.Key</h2>
    <FluentDataGrid GridTemplateColumns="1fr 100px 150px" TGridItem="RequiredTermsModel" Items="termsGroup.OrderBy(t => t.Description).AsQueryable()">
        
        <TemplateColumn Title="Name">
            <NavLink href="@($"/account/terms-and-conditions/{context.Name}")">@context.Description</NavLink> v@(context.Version)
        </TemplateColumn>

        <TemplateColumn Title="Agreed">
            <span class="mx-auto w-full">
                @if (context.AgreedDate is not null)
                {
                    <LocaleDate UtcValue="@context.AgreedDate.Value" Format="LocaleDate.DateFormat.DateOnly" />
                }
            </span>
        </TemplateColumn>

        <TemplateColumn Title="Document">
            <FluentAnchor Href="@($"/download-terms/{context.Name}")" Appearance="Appearance.Accent">
                <FluentIcon Value="new Icons.Regular.Size24.DocumentPdf()" Color="Color.Fill" Slot="start" />
                View PDF
            </FluentAnchor>
        </TemplateColumn>

    </FluentDataGrid>
</FluentCard>

Adding Multiline="true" fixes the spacing problem, but breaks the cell alignment:

[vnbaaij]

@ApacheTech I don't think it is the same problem as mentioned by James. In the original issue the height was different per cell:

In your issue, the cells/rows are just not high enough for the content it shows. With 4.11 you can now specify a RowSize parameter of type DataGridRowSize (enum). If not specified, it will use the default value of 'Small' which is 32px.

I think your problem can be solved by just adding RowSize=DataGridRowSize.Medium which translates to a height of 44px

[ApacheTech]

In this particular case, that works, but not for the majority of tables that have variable height cells. I see that DataGridRowSize.Dynamic is commented out. This was the default before; the row height fit to whatever it contained.

fluentui-blazor/src/Core/Enums/DataGridRowSize.cs

Line 32 in 94305a5

//Dynamic

[vnbaaij]

In this particular case, that works, but not for the majority of tables that have variable height cells. I see that DataGridRowSize.Dynamic is commented out. This was the default before; the row height fit to whatever it contained.

That is then an unfortunate side effects of moving to the table based rendering, I'm afraid.

If you use Multiline the height of cells will be set to 100%. Does that not cover the scenario you are describing?

[ApacheTech]

Using multiline forces the height to 100% for all cells in the row, so in your example, the content is no longer centred within the row. This is not always the preferred alignment, There's currently no way to vertically centre content within the row, within rows of variable height, or outside of the strict px based enum values for DataGridRowSize. If I have content of 60px, then I'm forced to use Multiline, which then messes up the alignment.

[vnbaaij]

True. But when using Multiline each cell gets the 'multiline-text' class attached so you should be able to overrule the alignment with your own CSS