From 3efb7f9130aa8d3d6de8ad8266b6cbcd96c5408e Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 26 Nov 2024 04:16:31 -0500 Subject: [PATCH 1/3] QuickGrid empty rows and border styling --- aspnetcore/blazor/components/quickgrid.md | 57 +++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md index bee919985700..f7f42a2d66e9 100644 --- a/aspnetcore/blazor/components/quickgrid.md +++ b/aspnetcore/blazor/components/quickgrid.md @@ -138,6 +138,63 @@ To provide a UI for pagination, add a [`Paginator` component](xref:Microsoft.Asp In the running app, page through the items using a rendered `Paginator` component. +QuickGrid renders additional empty rows to fill in the final page of data when used with a `Paginator` component. In .NET 9 or later, empty data cells (``) are added to the empty rows. The empty rows are intended to facilitate rendering the QuickGrid with stable row height and styling across all pages. You can apply styles to the rows using [CSS isolation](xref:blazor/components/css-isolation) by wrapping the `QuickGrid` component in a wrapper element, such as a `
`, and applying a row style with `::deep` [pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements): + +```css +::deep tr { + height: 2em; +} +``` + +:::moniker range=">= aspnetcore-9.0" + + + +In .NET 9 or later, Bootstrap styling adds a bottom border to empty row data cells, which results in a UI artifact. To remove the border styling of the empty cells on these rows, use [CSS isolation](xref:blazor/components/css-isolation). + +Consider the following QuickGrid placed in the app's `Index` component. The `QuickGrid` component has a wrapper `
` element, which permits you to apply `::deep` [pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to the QuickGrid. + +`Index.razor`: + +```razor +
+ + ... + +
+ + + +@code { + private PaginationState pagination = new PaginationState { ItemsPerPage = 10 }; + + ... +} +``` + +In the following isolated CSS styles: + +* Row cells populated with data are displayed. +* Empty row data cells aren't displayed, which avoids empty row cell borders rendering per the Bootstrap style. + +`Index.razor.css`: + +```css +::deep tr:has(> td:not(:empty)) > td { + display: table-cell; +} + +::deep td:empty { + display: none; +} +``` + +:::moniker-end + +For more information on using `::deep` [pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) with CSS isolation, see . + ## Custom attributes and styles QuickGrid also supports passing custom attributes and style classes () to the rendered table element: From d2c1e341d3336ff56c5cedce72d98fbd3ad50596 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 26 Nov 2024 11:23:50 -0500 Subject: [PATCH 2/3] Update aspnetcore/blazor/components/quickgrid.md Co-authored-by: Daniel Roth --- aspnetcore/blazor/components/quickgrid.md | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md index f7f42a2d66e9..1567548cf833 100644 --- a/aspnetcore/blazor/components/quickgrid.md +++ b/aspnetcore/blazor/components/quickgrid.md @@ -152,27 +152,7 @@ QuickGrid renders additional empty rows to fill in the final page of data when u if an empty row template feature is added that will result in an update the following content for >=10.0. --> -In .NET 9 or later, Bootstrap styling adds a bottom border to empty row data cells, which results in a UI artifact. To remove the border styling of the empty cells on these rows, use [CSS isolation](xref:blazor/components/css-isolation). - -Consider the following QuickGrid placed in the app's `Index` component. The `QuickGrid` component has a wrapper `
` element, which permits you to apply `::deep` [pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to the QuickGrid. - -`Index.razor`: - -```razor -
- - ... - -
- - - -@code { - private PaginationState pagination = new PaginationState { ItemsPerPage = 10 }; - - ... -} -``` +If you prefer to hide the empty rows rendered by the `QuickGrid`, you may do so using CSS styling to hide the empty data cell in rows that that don't contain any data. In the following isolated CSS styles: From 7232da59853a689f3bdecceb621e8a6f7b2821bc Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 26 Nov 2024 11:28:25 -0500 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/components/quickgrid.md | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md index 1567548cf833..bdf0348b5707 100644 --- a/aspnetcore/blazor/components/quickgrid.md +++ b/aspnetcore/blazor/components/quickgrid.md @@ -146,20 +146,12 @@ QuickGrid renders additional empty rows to fill in the final page of data when u } ``` -:::moniker range=">= aspnetcore-9.0" - - - -If you prefer to hide the empty rows rendered by the `QuickGrid`, you may do so using CSS styling to hide the empty data cell in rows that that don't contain any data. - -In the following isolated CSS styles: +To hide the empty row data cells rendered by the QuickGrid, use CSS styling. In the following isolated CSS styles: * Row cells populated with data are displayed. -* Empty row data cells aren't displayed, which avoids empty row cell borders rendering per the Bootstrap style. +* Empty row data cells aren't displayed, which avoids empty row cell borders from rendering per Bootstrap styling. -`Index.razor.css`: +`{COMPONENT}.razor.css`: ```css ::deep tr:has(> td:not(:empty)) > td { @@ -171,8 +163,6 @@ In the following isolated CSS styles: } ``` -:::moniker-end - For more information on using `::deep` [pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) with CSS isolation, see . ## Custom attributes and styles