Kevin Powell - Community•2y ago

Expandable row content problems

I'm modifying my table component (div table, with grid to make columns and rows), to have expandable rows. Problem is how should expandable content behave. I made it one section (it is not separated in columns) and rightfully so as I need large portion of that for content, but that seems to not be the best idea if I have really wide table with horizontal scroll. Let's say I trigger opening of that accordion in the mid of the table. Content will naturally be at start of the section , at start of the table. User has to scroll back to see it. Not good UX. So my idea is to somehow 'freeze' content in visible part of the screen, so even if you scroll left or right, that section stays the same. Any idea how to do this?

1 Reply

PerpetualWar•2y ago

I'm open for both CSS only solution, or solution involving JS. I could use combo of ResizeObserver (to calc value for width section) and IntersectionObserver (to calc left for position:absolute), but that seems too much effort for something like this. Hm actually not sure about IntersectionObserver in this case I believe I need just scroll position something like this:

.expanded-section {
  padding: 30px 20px;
  border-bottom: $htl-border;
  background-color: $htl-neutral8;
  box-shadow: inset 0 0 8px 1px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-column: 1/-1;
  position: relative;
}
.inner-scroll-container {
  overflow-x: auto;
  width: v-bind('styleWidth'); //from ResizeObserver
  left: 200px; // from scroll position
  border: 1px solid red;
  position: absolute;
}

.expanded-section {
  padding: 30px 20px;
  border-bottom: $htl-border;
  background-color: $htl-neutral8;
  box-shadow: inset 0 0 8px 1px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-column: 1/-1;
  position: relative;
}
.inner-scroll-container {
  overflow-x: auto;
  width: v-bind('styleWidth'); //from ResizeObserver
  left: 200px; // from scroll position
  border: 1px solid red;
  position: absolute;
}

Gaming

Programming

Expandable row content problems