Absolute positioned element pushing outside container

HTML & CSS
1

I have a code pen here - https://codepen.io/mt-ttmt/pen/WJoVzV

I’m trying to create a table with a sticky header that scrolls horizontally as well.

I think the best way is to create a fake header and then position that on top of the table so the table scrolls underneath.

I’m using jQuery to set widths to the fake header and scroll horizontally with the table.

The fake header is absolutely positioned so it sits on top of the header.

When the window is narrower than the table the fake header pushs outside its container and doesn’t scroll correctly.

Is it possible to position the fake header on top of the table without absolute positioning, or how can I fix it pushing outside its container when the window is narrower.

2

Hi,

EDIT:
That was only working with the absolute positioned header
Needs more work for when it changes to fixed

This should get it squared away.

.content-wrapper {
  border: 1px solid grey;
  margin: auto;
  max-width: 800px;
  position:relative; /*add this*/
}

.header-scroll {
  overflow-y: hidden;
  width: 100%; /*add this */
  max-width: 800px;  /*change to max-width*/
  /*don't use any offset values since it changes to position:fixed*/
  position: absolute;
  z-index: 20;
}

Had it not been changing to position:fixed; you could have used width:100% along with left:0;

Or the offsets left:0; along with right:0;

Since fixed elements with offsets position from the viewport you can’t use any offsets. You need to let it be fixed at the last spot it was in the page flow.

3

It looks like you need to remove the body default margins too

body {
  background: grey;
  font-family: sans-serif;
  margin:0;
}

Then it looks like you need to get the table under the fake header scrollbar
You may need to get you JS to do that, it looks like the JS is overring the 16px margin below.

.table-scroll {
  height: 1000px;
  position: relative;
  margin: 16x auto 0; /*16px room for fake header scrollbar*/
  overflow-y: scroll;
  z-index: 1;
}

The scrollbar on the fake header is hiding the first row of the table, the 16px margin fixes it while it is absolute but doesn’t work when it’s fixed

4

Sorry to rain on your parade again but I think this is a bad idea from a usability point of view not to mention it doesn’t work at all in Chrome on a mac or IOS. (Note that on the mac system the scrollbars are hidden by default and when they do appear they take up no space so you cannot account for them reliably using any fixed pixel measurements).

The main problem I see with this sticky table header apart from the jankiness of the whole thing is the fact that I cannot scroll the data left unless I scroll all the way down below the fold and find the horizontal scrollbar and then scroll left and then I have to scroll all the way back up the page to see the top rows. That is a usability nightmare!

Also because you fix position the header then you lose the relationship between the header width and the data width and even though you set the widths at run time you would need to reset the width every time the user resized the page wider or smaller or zoomed text smaller or larger. This would add even more to the jankiness of that page.

Also as you have a fake header you really should add that with js rather than having it there to start with and hide it from screen readers as they will be totally confused.

I still think you will be better off just scrolling the table itself in its own little panel rather than trying to sticky it to the top of the window. I know I showed you my example a few times now but see home much more usable this method is.

Of course its not perfect and I would use the position:sticky with no JS table instead and just let older browsers get the normal table. You seem to be degrading the experience for all modern browsers just to support an old outdated browser. At the least I would consider using the no js version and then enhance with js just for the browsers that don’t support position:sticky.

Sometimes you just have to make compromises :slight_smile:

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.