Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

ASP.NET QuickGrid: Style clash between QuickGrid default theme and bootstrap table

$
0
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.

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?

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>