If you have a views table with sticky headers. If the header becomes sticky it completly loses it's style, including borders, background colors.

At least these seems missing/changing:

  • table.sticky-header th (padding)
  • table.sticky-header th.active (background color)
CommentFileSizeAuthor
#14 2840308-14-8.x-3.x.patch1.79 KBmarkhalliwell
#13 interdiff-2840308-12-13-D7.patch1.18 KBmustanggb
#13 bootstrap-2840308-13-D7.patch6.63 KBmustanggb
#12 interdiff-2840308-7-12-D7.patch3.25 KBmustanggb
#12 bootstrap-2840308-12-D7.patch6.66 KBmustanggb
#7 Issue-2840308-by-hass-Sticky-header-loose-style-D7.patch6.23 KBhass
#5 sticky_header_with_table_class-2840308-5.png89.6 KBThew
#5 sticky_header-2840308-5.png90.69 KBThew
#5 normal_header-2840308-5.png33.39 KBThew

Comments

hass created an issue. See original summary.

hass’s picture

hass commented
Issue summary: View changes
hass’s picture

hass commented

Hell, I guess I found the reason. The .table class and some others are not added to sticky headers.

That is the sticky-header:

<table class="sticky-header" style="position: fixed; top: 79px; left: 381.5px; visibility: visible; width: 1140px;">
...
</table>

Compared to the normal table:

<table class="views-table sticky-enabled cols-5 table table-hover table-striped tableheader-processed sticky-table">
...
</table>
Thew’s picture

Thew commented
Version: 7.x-3.x-dev » 8.x-3.x-dev
Issue tags: +Needs backport to D7

This should be fixed in 8.x-3.x first.

Thew’s picture

Thew commented
StatusFileSize
new normal_header-2840308-5.png33.39 KB
new sticky_header-2840308-5.png90.69 KB
new sticky_header_with_table_class-2840308-5.png89.6 KB

Confirmed the bug for both D7 and D8.

Screenshots from D8
Normal Table Header
Normal Header

Sticky Table Header without Table class.
Sticky Header

Sticky Table Header with Table class.
Sticky Header With Table Class

The solution is to add .table class to table.sticky-header but the table.sticky-header is generated by Drupal core js. I'm not sure how to fix this.

hass’s picture

hass commented

We can replace tableheader.js with a custom bootstrap version. I'm not sure about the effect of bordered table style and other table-* classes. Maybe we also need to add them dynamically because of settings.

Tried to replace just the Dupal.tableheader, but was not successful.

hass’s picture

hass commented
StatusFileSize
new Issue-2840308-by-hass-Sticky-header-loose-style-D7.patch6.23 KB

This fixes the issue for D7.

hass’s picture

hass commented
markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Needs work
Issue tags: -Needs backport to D7 +needs backport to 7.x-3.x

Please fix HEAD first...........................

markhalliwell’s picture

markhalliwell
Primary language English
commented
Category: Bug report » Feature request

Also, this is a feature request, not a bug.

mustanggb’s picture

mustanggb commented

@hass Tried your D7 version, it works great for adding the missing classes, but doesn't take into account the horizontal scrolling we now have due to .table-responsive.

mustanggb’s picture

mustanggb commented
StatusFileSize
new bootstrap-2840308-12-D7.patch6.66 KB
new interdiff-2840308-7-12-D7.patch3.25 KB

Added a wrapper to #7 to address #11.

mustanggb’s picture

mustanggb commented
StatusFileSize
new bootstrap-2840308-13-D7.patch6.63 KB
new interdiff-2840308-12-13-D7.patch1.18 KB

Actually if we use marginLeft for the horizontal scrolliness position rather than left we get the added benefit that it works much nicer with "sticky column" code.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Title: Sticky header loose style » Sticky header loses styling
Version: 8.x-3.x-dev » 7.x-3.x-dev
Status: Needs work » Patch (to be ported)
Issue tags: -needs backport to 7.x-3.x
StatusFileSize
new 2840308-14-8.x-3.x.patch1.79 KB

  • markcarver committed 6948330 on 8.x-3.x 
    Issue #2840308 by markcarver, MustangGB, hass, Thew: Sticky header loses...
markhalliwell’s picture

markhalliwell
Primary language English
commented
Version: 7.x-3.x-dev » 8.x-3.x-dev
Status: Patch (to be ported) » Fixed

Considering that the D7 equivalent backport would essentially require us to take ownership of the entire file/plugin, I'm not comfortable adding this feature request to 7.x-3.x at this time. It can remain here as a patch if sites really need it.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Fixed » Closed (fixed)