position: sticky only works on the right side

Question

I would like my cell to stick to the left or right of the scrollable container. As you can see the yellow cell is only sticking to the right side despite left: 0px.

How can I get it to stick to both, as in if you scroll all the way to the right the cell should be stuck on the left side? Like this: https://stackblitz.com/edit/react-rgukbo?file=app/main.jsx

Edit: It seems if I change direction: ltr/rtl on the container it sticks to one or the other but not both

.container {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: 200px 200px 80px 200px 200px 200px;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sticky {
  position: sticky;
  left: 0px;
  right: 0px;
  z-index: 1;
  background: yellow;
}

<div class="container">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell sticky">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>

as in if you scroll all the way to the right you should see the cell stuck on the left — Dominic, Jun 06 '20 at 04:39
it appears that Kendo managed to do it using sticky: https://stackblitz.com/edit/react-rgukbo?file=app/main.jsx — Dominic, Jun 06 '20 at 04:54
@dippas figured it out, just had to change grid to inline-grid — Dominic, Jun 06 '20 at 05:11

score 3 · Answer 1 · answered Jun 06 '20 at 05:10

I was able to get it working by changing grid to inline-grid ‍♂️

.container {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.grid {
  display: inline-grid;
  grid-template-columns: 200px 200px 80px 200px 200px 200px;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sticky {
  position: sticky;
  left: 0px;
  right: 0px;
  z-index: 1;
  background: yellow;
}

<div class="container">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell sticky">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>

Also add min-width:100% to make sure the element keep it's block behavior in case the content is small — Temani Afif, Jun 06 '20 at 08:34

position: sticky only works on the right side

1 Answers1