Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.See attached screenshot.
Table Headings are floating 39px off the top instead of staying fixed at the top on smaller screens
| Comment | File | Size | Author |
|---|---|---|---|
| #40 | 1899616-nr-bot.txt | 161 bytes | needs-review-queue-bot |
| #32 | patchFailed.JPG | 41.36 KB | pankaj.singh |
| #32 | responsiveWidth600.JPG | 28.07 KB | pankaj.singh |
| #32 | beforePatch(3).JPG | 31.55 KB | pankaj.singh |
| #21 | sticky_header_IE.png | 40.75 KB | animaci |
Comments
Comment #1
jayboodhun CreditAttribution: jayboodhun commentedThe table heading was floating because the Toolbar at the top wasn't fixed to the top. Hence the 39px gap.
The toolbar stays fixed at the top only on screen sizes of 28.125em and above.
Not sure why this is, but i have removed this in the CSS, so the toolbar will be fixed to the top always.
Please review the patch
Comment #2
jayboodhun CreditAttribution: jayboodhun commentedScreenshot After Fixed Toolbar
Comment #3
jayboodhun CreditAttribution: jayboodhun commentedComment #4
LewisNymanTagging, it would be good to get some insight from Jesse.
Comment #5
rteijeiro CreditAttribution: rteijeiro commentedOk, 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! :)
Comment #6
aspilicious CreditAttribution: aspilicious commentedNeeds review from jess and I don't think it's a good idea to throw away the media query, moving it should be sufficient.
Comment #7
RainbowArrayI 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.
Comment #8
nod_tableheaders were removed pretty much everywhere so it's less important now :D
Comment #9
Sam152 CreditAttribution: Sam152 commentedSticky 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:
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.
Comment #10
Sam152 CreditAttribution: Sam152 commentedFurther to the above, I just noticed the permissions table has a sticky header if anyone wants to review and test the above.
Comment #11
gavin.hughes CreditAttribution: gavin.hughes commentedTested 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.
Comment #12
LewisNymanComment #13
Wim LeersComment #14
Wim LeersA novice contributor could:
Comment #15
ikeigenwijs CreditAttribution: ikeigenwijs commentedBug 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.
Comment #16
ikeigenwijs CreditAttribution: ikeigenwijs commentedComment #17
Wim LeersI 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.displaceby the toolbar doesn't get updated to *zero* by the Toolbar when it's a narrow viewport, which is wrong.Comment #18
LewisNyman@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)
Comment #19
Wim LeersI 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.
Comment #20
Wim LeersComment #21
animaci CreditAttribution: animaci commentedI 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.
Comment #29
nod_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!
Comment #31
pankaj.singh CreditAttribution: pankaj.singh as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedComment #32
pankaj.singh CreditAttribution: pankaj.singh as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedVerified 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.
Comment #33
pankaj.singh CreditAttribution: pankaj.singh as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedComment #37
DeepaliJ CreditAttribution: DeepaliJ at Salsa Digital commentedComment #38
DeepaliJ CreditAttribution: DeepaliJ at Salsa Digital commentedComment #40
needs-review-queue-bot CreditAttribution: needs-review-queue-bot as a volunteer commentedThe 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.