Skip to content

Commit 82d6874

Browse files
committed
Updates
1 parent 9f68f89 commit 82d6874

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

aspnetcore/blazor/components/quickgrid.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,11 @@ To provide a UI for pagination, add a [`Paginator` component](xref:Microsoft.Asp
138138

139139
In the running app, page through the items using a rendered `Paginator` component.
140140

141-
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 (`<td></td>`) 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. Apply styles to the rows using [CSS isolation](xref:blazor/components/css-isolation).
141+
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 (`<td></td>`) 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.
142+
143+
## Apply row styles
144+
145+
Apply styles to rows using [CSS isolation](xref:blazor/components/css-isolation), which can include styling empty rows for `QuickGrid` components that [page data with a `Paginator` component](#page-items-with-a-paginator-components).
142146

143147
Wrap the `QuickGrid` component in a wrapper block element, for example a `<div>`:
144148

@@ -150,7 +154,7 @@ Wrap the `QuickGrid` component in a wrapper block element, for example a `<div>`
150154
+ </div>
151155
```
152156

153-
Apply a row style with the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements). In the following example, row height is set to `2em`.
157+
Apply a row style with the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements). In the following example, row height is set to `2em`, including for empty data rows.
154158

155159
`{COMPONENT}.razor.css`:
156160

@@ -160,10 +164,10 @@ Apply a row style with the `::deep` [pseudo-element](https://developer.mozilla.o
160164
}
161165
```
162166

163-
Alternatively, use the following CSS styling approach to hide the empty row data cells:
167+
Alternatively, use the following CSS styling approach:
164168

165169
* Display row cells populated with data.
166-
* Don't display empty row data cells, which avoids empty row cell borders from rendering per Bootstrap styling.
170+
* Don't display empty row cells, which avoids empty row cell borders from rendering per Bootstrap styling.
167171

168172
`{COMPONENT}.razor.css`:
169173

0 commit comments

Comments
 (0)