Sticky headers in view with grouped results

I have fixed this kindly used the attached patched and its working for both content and content view

I have reviewed and applied above patch.
Patch No. : 3474245-1

Its working fine on both places :

1. Content
2. ContentView

I have also attached screenshot for better reference.

The patch from #3 works fine. Thanks @amitnar. Would you create MR?

As per comment #7, MR is created.
Moving to Needs Review.

Hi

Reviewed this issue, works fine after applying MR.
Gin theme version 8.x-3.0-rc13
Drupal version 11.0.5-dev

Steps taken

1. Enable Gin admin theme
2. Create new view with some fields, displayed as a table
3. In Format: Settings select any field as Grouping field Nr.1
4. In the same form enable "Drupal style sticky table headers"
5. Observe dupliacted table headers, hiding name of the first group.

This issue can be moved ahead.
RTBC +

The should only be one visible header at any time.
At the given screenshots it is clear that this is not the case.

@iro, thanks for checking!

The reason why there are two headers is caused by the fact that we are using "group by column" option and default Drupal behavior is to add separate header to every group created this way. Please see how it looks on Claro: claro_views_groupped_table.png →

However, sticky header on Claro works bit better, because it is moving only within one table and when it reaches the top of the screen, second header becomes sticky - all of them are working only within own table. While in Gin, the header that becomes sticky is always the first header from the first table and it travels through all of the page, creating an effect of duplicated headers from time to time. The other implication is that if tables has different width of the columns, this first header that became sticky is not aligned with the columns on nect tables.

So, in my opinion, the original bug here has been fixed (as sticky header is not covering group headers anymore), however there is still issue with how sticky headers are working in Gin. But it would probably require separate issue? I'm happy to report separate issue on this, unless anybody feels different?

@besek kindly create another ticket as discussed in your comment If there is any issue in this ticket kindly provide the correct information with a screen-shot so that we can fix this.

Thanks

I'm not sure we need a separate issue for this. It even seems that the problem is more broad than the issue title suggests because I'm having that same problem with a duplicate table header for a table WITHOUT using any grouping. Here is an example:

Here is some extra observation that may help to find the source of the issue:

The view above comes in 2 flavours: as a page and as a block. When going to the page, the sticky table header works just fine. When going to a page where that view is embedded as a block, then the table header is duplicated.

Now, that sounds like the block wrapper plays a role here. And that would relate to the initial issue with the view being grouped. In both cases, there are extra wrappers involved that probably break some selectors that would otherwise work just fine.

Another step forward: for the table inside a block, not as a page, when we remove the top property from table.gin--sticky-table-header, then both table headers are aligned one over the other, and it looks as if there is only one table header as it should be. I'm pretty sure, that would "fix" the visual issue for grouped tables as well.

However, when doing this, the sticky header isn't visible when the user scrolls down, as then the top toolbar comes into play and overlaps that sticky header.

I don't know, if and how we can resolve this, but at least we may now know where this is coming from.

I've created the MR !512 which fixes the sticky table header display for views in a block. Please try that with the grouped views as well.

Afterwards, we need to find out, how we can make that work together with the top toolbar.

Sorry, for all the noise, but I discovered something additional: in my case, the view block is embedded into a wrapper which comes from the collapsiblock → module. When I disable that wrapper for this view block, then Gin works correctly without any patch or MR. So, I wonder if something similar is happening with the grouped blocks?

I'll review this one

selfirian → closed merge request !514

Hello,

Sorry for the MR!514, I'm still trying to figure this thing out.

Anyhow I found a way to push my changes, yeaah :)

I've commented out some JS because that was causing some issues with these sticky headers IMO, for the rest I followed this approach: https://css-tricks.com/position-sticky-and-table-headers/

Sticky headers for tables can be done in pure css so why not do that.

I just couldn't figure out how to keep the borders once they became sticky...

I've removed my attempt, this can't be fixed using the pure css approach like I initially thought.

Maybe we should look into how it's done here: https://github.com/archfz/vh-sticky-table-header