Document that QuickGrid may render additional empty rows on the last page when using a paginator that should be appropriately styled

[danroth27]

When you use a paginator with QuickGrid, it may render additional empty rows on the last page to fill it out and make it easier to style the grid to be a fixed height. We should document this behavior and recommend accounting for these extra empty rows in the app's styling.

Related discussion: https://github.com/dotnet/aspnetcore/issues/57199

[JaquesBotha]

Ran into the same issue. I've already looked into this from a CSS perspective... I've already tried using:

.quickgrid tbody tr:empty {
    display: none;
}

However, this will not work since when you inspect element you will find that the 's are still loading. I took a different approach and tried this:

.quickgrid tbody tr:has(td:empty) {
    display: none;
}

However, this MIGHT work but I find that certain <tr>'s are being skipped. Overall I am a HUGE advocate for not rendering items that don't need rendering so with that using CSS is not (in my opinion) the right solution. It shouldn't hit the DOM in the first place.

[guardrex]

Perhaps we changed the CSS and regressed this.

QuickGrid of 8.0 didn't produce <td> elements in rows unpopulated with data (and zero or more <td>s are permitted by the spec). In 9.0, empty <td> elements are being produced in those rows, so Bootstrap is adding a border-bottom-width via ...

.table > :not(caption) > * > * {
    ...
    border-bottom-width: var(--bs-border-width);
    ...
}

Playing off of the Bootstrap style (added to app.css) ...

.table > :not(caption) > tr > td:empty {
    border-bottom-width: 0;
}

... works if all of the cells of populated rows have a value, but that's not a good general assumption.

Otherwise, there are no distinguishing classes on these empty rows/cells to solve this easily. JS could take care of it, but that's not great.

UPDATE (11/26): For completeness on the border aspect, the following works with CSS isolation, again noting that all QG populated data row table cells must have data for this to work:

::deep td:empty {
    border-bottom-width: 0;
}

[danroth27]

@guardrex The intent behind adding the empty rows and cells is to facilitate styling the QuickGrid so that it has a stable height and styling across all pages of data. So, what we want to document here is not hiding the styling of the empty cells but styling all the rows to have a consistent height when using pagination. Something like:

::deep tr {
    height: 2em;
}

[danroth27]

Opened https://github.com/dotnet/AspNetCore.Docs/issues/34211 to track the doc updates.

[guardrex]

I'll move the discussion over to the issue. I need more information.