Kevin Powell - Community•2mo ago

Grid Sticky Header/First Column

Does anyone know why and if there's a fix for a Grid/Flexbox layout with a sticky header and first column, that seems to work, but when scrolling horizonally, the header is only sticky for the original width of the viewport. This CodePen is a good example (from someone else here with a sticky header question): https://codepen.io/AnaZG1509/pen/xxJbjzV If you make the viewport small enough, you'll see that it moves after two columns' width worth of scroll. I can't seem to get a grid/flexbox stickiness to work that doesn't suffer from this. My current solution is a table inside it's own grid container so that the header and first column correctly stay in place in the whole page (opposed to a fixed height container). But tables tables are not ideal for this (I am trying to build a scheduler)

AnaZG

CodePen

Custom Table wit Drag&Drop and sticky header&first column

...

16 Replies

b1mind•2mo ago

Things can only stick as width/height of their parent. So because the parent grid is sizing it self smaller than the content its ending and sticky hits the end of its parent and the parent scrolls more Possible fix is just to tell the parent to fit its content

b1mind•2mo ago

b1mind•2mo ago

ah yea fit-content seems to work better than max #depends on how you want it spaced ig

Chris Bolson•2mo ago

I haven't had time to look through all the code to work out why the "table" has been set up as it is but one fix would be to change the way the .table-header is defined. Currently it is set to display: contents; Changing that to this seems to fix the issue

.table-header {
      /*display: contents;*/
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: inherit;
  }

.table-header {
      /*display: contents;*/
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: inherit;
  }

b1mind•2mo ago

Yea I was unsure why they made a <header> element display: contents too xD so I just ignored it (as the dom or rather css 🤷‍♂️ would hah)

Chris Bolson•2mo ago

ah, one sec... that breaks the sticky header functionality 🤔

b1mind•2mo ago

Current implementations in some browsers will remove from the accessibility tree any element with a display value of contents (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology.

So I really REALLY wouldn't use it on a <header> element

Chris Bolson•2mo ago

This should fix the sticky header

.table-header {
      /*display: contents;*/
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: inherit;
    position: sticky;
    top: 0;
  }
table-wrapper_draggable .table-body, 
.table-wrapper_draggable .table-footer {
  grid-column: 1/-1;  
  z-index:0;
}

.table-header {
      /*display: contents;*/
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: inherit;
    position: sticky;
    top: 0;
  }
table-wrapper_draggable .table-body, 
.table-wrapper_draggable .table-footer {
  grid-column: 1/-1;  
  z-index:0;
}

b1mind•2mo ago

You can see without setting a width on the parent grid its trying to fill the paint of only its parent even though it over flows

b1mind•2mo ago

with width: fit-content; it will be the width it needs to be

b1mind•2mo ago

Chris Bolson•2mo ago

Sorry, I went down my path but your solution is much simpler 😆 The whole thing looks overly complcated for what it is. But maybe it has to be that way for the fixed side column and top row combined with the need for the rows to be draggable 🤔

b1mind•2mo ago

Your solutions fixing more of the underlying problem of having that header just display contents though Mines just the quick hack lol

Chris Bolson•2mo ago

if it works.... But I agree, making the header inaccessible is probably not the best solution for a table of data. A combination of both suggestions seems to work if we throw subgrid in to the mix (and no need to change any sticky properties).

.table-header {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
...

&.table-col-5  div[role="table"],
    &.table-col-5 .table-row{
        grid-template-columns: 250px repeat(3, minmax(150px, 300px)) minmax(300px, 1fr);
        /*min-width: 50rem;*/
      width: fit-content;
    }

.table-header {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
...

&.table-col-5  div[role="table"],
    &.table-col-5 .table-row{
        grid-template-columns: 250px repeat(3, minmax(150px, 300px)) minmax(300px, 1fr);
        /*min-width: 50rem;*/
      width: fit-content;
    }

tbasalloOP•2mo ago

Thanks so much! I should have used my code and not be lazy and use that CodePen because that had way too much going on. The fit-content on width was the fixer for my much simpler version (https://codepen.io/tbasallo/pen/jEOGOPm)

tbasallo

CodePen

Sticky First Row and Column

...

tbasalloOP•2mo ago

I need to lookup subgrid - KP as a couple videos on it, I know :/ - since that wasn't my code, I am not sure how the subgrid affects it - I'll need to check and see if I should use subgrid in my much simpler version. Subgrid support is good enough for my audience, so I can def use it.

Gaming

Programming

Grid Sticky Header/First Column

Did you find this page helpful?