You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components/quickgrid.md
+8-4Lines changed: 8 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -138,7 +138,11 @@ To provide a UI for pagination, add a [`Paginator` component](xref:Microsoft.Asp
138
138
139
139
In the running app, page through the items using a rendered `Paginator` component.
140
140
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).
142
146
143
147
Wrap the `QuickGrid` component in a wrapper block element, for example a `<div>`:
144
148
@@ -150,7 +154,7 @@ Wrap the `QuickGrid` component in a wrapper block element, for example a `<div>`
150
154
+ </div>
151
155
```
152
156
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.
154
158
155
159
`{COMPONENT}.razor.css`:
156
160
@@ -160,10 +164,10 @@ Apply a row style with the `::deep` [pseudo-element](https://developer.mozilla.o
160
164
}
161
165
```
162
166
163
-
Alternatively, use the following CSS styling approach to hide the empty row data cells:
167
+
Alternatively, use the following CSS styling approach:
164
168
165
169
* 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.
0 commit comments