Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FlunetDatagird] in [Safari v17.4.1 ] #1985

Closed
sardar97 opened this issue Apr 30, 2024 · 5 comments
Closed

[FlunetDatagird] in [Safari v17.4.1 ] #1985

sardar97 opened this issue Apr 30, 2024 · 5 comments
Labels
triage New issue. Needs to be looked at

Comments

@sardar97
Copy link

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 :
fluent

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

@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Apr 30, 2024
@vnbaaij
Copy link
Collaborator

vnbaaij commented May 1, 2024

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
Copy link
Author

sardar97 commented May 1, 2024

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

Screenshot 2024-05-01 at 4 44 54 PM

@vnbaaij
Copy link
Collaborator

vnbaaij commented May 1, 2024

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

@sardar97
Copy link
Author

sardar97 commented May 1, 2024

yes of course the pagination is working as well.

@vnbaaij
Copy link
Collaborator

vnbaaij commented May 1, 2024

Closing this one then!

@vnbaaij vnbaaij closed this as completed May 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage New issue. Needs to be looked at
Projects
None yet
Development

No branches or pull requests

2 participants