Sticky table headers float instead of being sticky at the top on narrow screens

Tagging, it would be good to get some insight from Jesse.

Ok, I have tested the #1 patch and it seems to solve the table heading issue.

Tested with Chrome, Safari, Firefox, Opera and also in iPhone.

Great work! :)

Needs review from jess and I don't think it's a good idea to throw away the media query, moving it should be sufficient.

I have to imagine the media query was in there because position fixed has had a history of bad bugs on mobile devices. Support has gotten somewhat better is my understanding: not sure if it good enough to drop the media query.

tableheaders were removed pretty much everywhere so it's less important now :D

Sticky headers are still in core so I think this is still worth looking at. I can confirm the issue still does exist. Steps to reproduce:

• Login with a user with access to a toolbar.
• Create a table with a sticky header (I did this by creating a view of content).
• Populate the table with enough content so that the top of your browser can scroll past the top of the table.
• Resize your browser to be less than 610px wide.
• Ensure you are scrolled to the top of the page.
• Refresh and scroll down the page until the table header is stuck to the top of the screen and also "floating" 39px below the table.

I had a crack at a patch. I'll admit I was digging around in displace.js for a while trying to understand what was going on and I'm not entirely sure if it's the correct place to handle this, however it seems to entirely eliminate the bug.

My understanding is, by not considering the toolbar an element that displaces the viewport when it isn't position:fixed, we are eliminating the sticky table header bug which respects the viewport displacements.

Further to the above, I just noticed the permissions table has a sticky header if anyone wants to review and test the above.

Tested using the permissions table and the issue exits, The patch needed to be a re-roll for it to apply and it fixes the issue,
I'm agree with Sam152 in #9 I'm not sure its the best place to fix the problem.

A novice contributor could:

1. verify that this problem still exists, and if it doesn't, this issue can be closed
2. if the problem still exists, test the patch in #11 and verify that it works

Bug is still valid.

Does not happen always and immediately.
You have to narrow until a very smart view port -> cell phone size
Resize a lot to trigger the behavior

Changes the behavior of the toolbar to not be sticky on the header screen but to the head of the page.
The toolbar does not pass the new size-> 0 when going in small view port mode.

I looked at this together with ikeigenwijs and this is definitely not a Novice issue.

The key to understanding this issue is that the toolbar DOES scroll in wide viewports (i.e. stays visible at the top of the viewport), but DOES NOT scroll in narrow viewports (i.e. stays at the top of the document, and is not visible after scrolling down).

I suspect that the top-relative displacement stored in Drupal.displace by the toolbar doesn't get updated to *zero* by the Toolbar when it's a narrow viewport, which is wrong.

@Wim Leers From a usability point of view, it actually makes a lot of sense to have the position fixed on narrow screens. Do you know why the decision was made not to fix it? That could be an easier fix. (assuming I understand the issue correctly)

I don't know nor remember — I don't think I was involved in that decision.

I'd agree with you if it weren't for the fact that screen real estate on e.g. smartphones is very, very limited, which is why I think it works this way: having the toolbar be *always* visible would effectively make the available viewport smaller.

I have tested 11.patch in IE9 under Drupal core 8.0.6.
Without the patch the sticky header works in IE, just not nice, as it is not at the top of the page (should be fixed also I think so):

With using 11.patch, the header can not be seen during scrolling.

Given #2516938: Set the toolbar to position fixed on mobile the problem might just go away. Would need confirmation if someone could test it. Thanks!

Verified the issue on 8.9.x and reproducible, also tested by adjusting the width less than 610 px and getting the same issue.

Applied the patch but its failing on 8.9.x.

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

The Toolbar Module was approved for removal in #3476882: [Policy] Move Toolbar module to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3484850: [meta] Tasks to deprecate Toolbar module and the removal work in #3488828: [meta] Tasks to remove Toolbar module.

Toolbar will be moved to a contributed project before Drupal 12.0.0 is released.