See attached screenshot.
Table Headings are floating 39px off the top instead of staying fixed at the top on smaller screens

Files: 
CommentFileSizeAuthor
#21 sticky_header_IE.png40.75 KBanimaci
#15 Screenshot small vieuwport.png411.6 KBikeigenwijs
#11 table_headings_small_screens-1899616-11.patch584 bytesgavin.hughes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 66,830 pass(es). View
#9 table_headings_small_screens-1899616-9.patch624 bytesSam152
PASSED: [[SimpleTest]]: [MySQL] 59,347 pass(es). View
#2 floatingTableHeaderAfterFix.png25.84 KBjayboodhun
#1 table_headings_small_screens-1899616-1.patch476 bytesjayboodhun
PASSED: [[SimpleTest]]: [MySQL] 49,329 pass(es). View
floatingTableHeader.png21.8 KBjayboodhun

Comments

jayboodhun’s picture

Status: Active » Needs review
FileSize
476 bytes
PASSED: [[SimpleTest]]: [MySQL] 49,329 pass(es). View

The 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

jayboodhun’s picture

Screenshot After Fixed Toolbar

jayboodhun’s picture

Assigned: jayboodhun » Unassigned
LewisNyman’s picture

Issue tags: +mobile, +d8mux, +mobile-novice, +d8mux-admin

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

rteijeiro’s picture

Status: Needs review » Reviewed & tested by the community

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! :)

aspilicious’s picture

Status: Reviewed & tested by the community » Needs review

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.

mdrummond’s picture

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.

nod_’s picture

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

Sam152’s picture

Issue summary: View changes
FileSize
624 bytes
PASSED: [[SimpleTest]]: [MySQL] 59,347 pass(es). View

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.

Sam152’s picture

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

gavin.hughes’s picture

FileSize
584 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 66,830 pass(es). View

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.

LewisNyman’s picture

Issue tags: +JavaScript, +CSS, +frontend
Wim Leers’s picture

Title: Table Headings Float instead of being sticky at the top on small screens » Sticky table headers float instead of being sticky at the top on narrow screens
Issue tags: +DrupalCamp Ghent 2014, +sprint, +Novice
Wim Leers’s picture

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
ikeigenwijs’s picture

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.

ikeigenwijs’s picture

Status: Needs review » Active
Wim Leers’s picture

Issue tags: -mobile-novice, -Novice

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.

LewisNyman’s picture

@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)

Wim Leers’s picture

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.

Wim Leers’s picture

Issue tags: -sprint
animaci’s picture

FileSize
40.75 KB

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):
sticky_header_IE

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

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.