0

Repro:

  1. Create the default Visual Studio Blazor Server Template with sample pages.
  2. Add a nuget reference to Microsoft.AspNetCore.Components.QuickGrid (10.0.0)
  3. Replace the weather page with a similar page, just using QuickGrid instead of a "manual" HTML table:
@page "/weather"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Weather</PageTitle>

<!-- QuickGrid default theme only -->
<QuickGrid Items="@forecasts">
    <PropertyColumn Property="@(f => f.Date)" />
    <PropertyColumn Property="@(f => f.TemperatureC)" Sortable="true" />
</QuickGrid>

<!-- Bootstrap table only -->
<QuickGrid Items="@forecasts" Class="table" Theme="nonExistingTheme">
    <PropertyColumn Property="@(f => f.Date)" />
    <PropertyColumn Property="@(f => f.TemperatureC)" Sortable="true" />
</QuickGrid>

<!-- Both QuickGrid default theme and Bootstrap table -->
<QuickGrid Items="@forecasts" Class="table">
    <PropertyColumn Property="@(f => f.Date)" />
    <PropertyColumn Property="@(f => f.TemperatureC)" Sortable="true" />
</QuickGrid>

@code {
    IQueryable<WeatherForecast>? forecasts;

    protected override void OnInitialized()
    {
        var startDate = DateOnly.FromDateTime(DateTime.Now);
        forecasts = Enumerable.Range(1, 5).Select(index => 
            new WeatherForecast(startDate.AddDays(index), Random.Shared.Next(-20, 55))
        ).AsQueryable();
    }

    private record WeatherForecast(DateOnly Date, int TemperatureC);
}

This yields the following three table layouts:

screenshot

It appears that the combination of

  • QuickGrid default theme and
  • Bootstrap 5 table (seen in table 3) causes an unintended "indent" of the headers.

Neither table 1 (only QuickGrid default theme) nor table 2 (only Bootstrap 5 table) show that.

The default App.razor supplied by VS imports first bootstrap.min.css, then app.css and then the auto-generated {PACKAGE ID/ASSEMBLY NAME}.styles.css, which also includes the QuickGrid css directives.

I know that I can fix that by adding custom !important CSS overrides. That is not my question.

My question is this:

  1. Is this really an incompatibility between those two components (which seems odd, since the default Blazor template includes Bootstrap, and QuickGrid is the default grid control for Blazor) that every developer is supposed to fix by themselves,
  2. or am I just "holding it wrong" and missing something obvious?
2
  • Please add clarity for the specific quickgrid version used here so someone viewing this in the future knows it is related to that, also clarify the order of the CSS in the cascade as that may be important Commented yesterday
  • @MarkSchultheiss: (1) done. (2) The default App.razor supplied by VS imports first bootstrap.min.css, then app.css and then the auto-generated {PACKAGE ID/ASSEMBLY NAME}.styles.css, which also includes the QuickGrid css directives. Commented yesterday

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.