CI4: Bootstrap-table header broken on scroll

[objecttothis]

bootstrap-table handles creating the table header and body. The header is pinned during scroll, which is good, but on scroll it breaks causing the formerly non-visible header columns to appear and scrolling to no longer be fixed to the table.

You can see below that the header row is decoupled in horizontal scrolling from the table body. This does not happen when the header is not trying to pin itself.

[objecttothis]

I upgraded the version of bootstrap-table to 1.22.1, but the issue persists. I was able to duplicate the issue on the bootstrap-table demo page of their website, so this is an issue specific to the StickyHeaders functionality in bootstrap-table. I created an issue in their repo wenzhixin/bootstrap-table#7090

[jekkos]

Thanks for looking into this @objecttothis ! I wonder if there would be a way to make the table more responsive.

[objecttothis]

Thanks for looking into this @objecttothis ! I wonder if there would be a way to make the table more responsive.

It's responsive for large and medium screens but not for small. It's possible that moving everything to bootstrap 5 will make it easier to make the entire table responsive. Likely the goal will be to specify how wide the table view is able to get down to and possibly to make the footer sticky on small displays. We may need to replace bootstrap-table if it can't do these things.

I just checked this example on their site (https://examples.bootstrap-table.com/) and it's much more responsive with sticky footers, so it looks like we may be able to make it work... they are using Bootstrap 5 though.

[jekkos]

I saw some activity in the bootstrap tables project for this one, will check if we can upgrade to the latest commit.

[jekkos]

I managed to bump the bootstrap table, had to upgrade the travis env to ubuntu jammy and now using a native node installation on that one instead of docker.
I will however try to fix the version to a specific commit hash for bstables

[jekkos]

@objecttothis would the screencap here prove that the issue is fixed?

[objecttothis]

@objecttothis would the screencap here prove that the issue is fixed?

The issue wasn't with the table header alignment in it's un-scrolled position. The issue only appears after you scroll past the top of the table and the header goes into "sticky" mode. Can you confirm that scrolling down so that the header goes into sticky mode does not exhibit the misalignment issue?

[jekkos]

[jekkos]

The bootstrap tables issue was closed so that is why I thought it was fixed, but indeed, when I resize the window to make the headers sticky then it does not align with the body

[objecttothis]

The bootstrap tables issue was closed so that is why I thought it was fixed, but indeed, when I resize the window to make the headers sticky then it does not align with the body

He reopened it right after. I think it was because he had mentioned the issue in a PR that was merged.

[objecttothis]

The latest release of bootstrap tables is now 1.22.2 and there are some commits since then, but the issue does not seem to have been address so far. This will be on hold until the issue is resolved in bootstrap tables.

[objecttothis]

I bumped bootstrap-tables to 1.22.4. Issue persists.