[FlunetDatagird] in [Safari v17.4.1 ]

[sardar97]

FlunetDatagird has an issue with column design and pagination has no interactivity's only on safari.
when I click pagination it has no interactivity's and this works fine with chrome and opera as far as I tested but on my MacBook
safari version 17.4.1 has these issues.
here is my example codes which is the default fluent ui templates :

@page "/weather" 
@rendermode @(new InteractiveServerRenderMode(false))
<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <!-- This page is rendered in SSR mode, so the FluentDataGrid component does not offer any interactivity (like sorting). -->
    <FluentDataGrid Id="weathergrid" Pagination="@pagination" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" TGridItem="WeatherForecast">
        <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start"/>
        <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center"/>
        <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center"/>
        <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End"/>
    </FluentDataGrid>
    <FluentPaginator State="@pagination" />
}

@code {
    private IQueryable<WeatherForecast>? forecasts;
    PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).AsQueryable();
    }

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }

}

and here is the safari example picture :

here is video example for both opera and safari :
Click to see the Video

[vnbaaij]

What you can see in your movie is that the header labels are shown all the way down on the page. This is an issue with Safarit that was found in Aspire a couple of days ago as well. A fix will be rolled out for that by us soon. The too big headers are probably covering the buttons and that is why you can't click them

You can probably fix that by adding this to the site.css:

.column-header {
    height: inherit !important;
}

Can you try and let us know if it fixes your issue (and shows the headers in the right spot)?

[sardar97]

yes! work like a charm! thank u so much.

[vnbaaij]

Just to confirm, paging works as well with this change?

[sardar97]

yes of course the pagination is working as well.

[vnbaaij]

Closing this one then!