0

I am trying to implement the following design. Each item visually looks like it is a single row and should scroll as such, but implementation rules are giving me trouble here. The rules are:

  • The entire list should be scrollable on Y-axis if needed (overflow-y: auto), denoted by the far right scrollbar.
  • The right half portion (with the radio boxes) should be scrollable on the X-axis, denoted by the bottom scrollbar
  • The bottom scrollbar should always be visible if needed (overflow-x: auto)

Taking these rules into consideration, I have decided to make two panels. One left for the texts, and one right for the x-scrolling radios. I mostly have it working in a wireframe, however, the bottom scrollbar is always at the bottom of the radio, not always visible. I know I can't make the scrollbar sticky so I'm a bit stuck how to implement this.

Here's my codepen (it's rough but its only a POC)

I'm also wondering if this approach is the best to take. Ideally I build the row as a true row, without split panels, but I still get stuck on the right side single x-axis scrollbar. An ideal solution would be without JS but not necessarily a blocker.

A few other approaches I've tried are

  • Make the left panel sticky, however the Y-axis scrolling rule is not met.
  • Set the right panel height to be that of the containers, but then it is not scrolled with the left.
  • Make both panels scrollable and use JS to scroll both, but this seems heavy with edge cases (scrolling the incorrect side)

Implementation image enter image description here

I've been banging my head on this one a fair bit and it's time I ask for help. If anyone could point me in the right direction or correct my approach it would be greatly appreciated!

Ryan Peterson
  • 132
  • 1
  • 9
  • If you remove the Overflow-x:scroll; from .flex_item_right, the scroll bar will be visible. – Rishab Tyagi May 27 '20 at 14:46
  • @RishabhdevTyagi The problem there is the scrollbar that appears is then on the container, which is full width. Per the design spec I only need it to be on the right pane. – Ryan Peterson May 27 '20 at 14:49
  • This may be answered by this question: https://stackoverflow.com/questions/47303972/how-to-make-first-column-in-a-row-sticky-when-scrolling-horizontal-using-flex-la If not then it would be helpful to know what about that answer doesn't fit your needs – Kevin May 27 '20 at 14:52
  • @KevinWells The problem is the scrollbar on the bottom is full width in that example. Even if I were to sticky the left panel on top of the scrollbar in mine, the scrollers position wouldn't be correct (it would start far left and hidden) – Ryan Peterson May 27 '20 at 15:45
  • @RyanPeterson What you're trying to do isn't possible with pure css. If only the right column shows the horizontal scrollbar, then it will show at the bottom of that element, which is only visible at the bottom of the vertically scrollable container. If the right column does show the horizontal scrollbar even when scrolled up to the top, then it will have to vertically scroll itself, but then it will be disconnected from the left-column. Is there a particular reason that the horizontal scrollbar can't just show across the full width? If so you may need to look into javascript solutions – Kevin May 27 '20 at 16:58
  • @KevinWells Simply these are the requirements given. I suspected it may not be able to be done by CSS alone. Do you have any ideas for a JS approach? – Ryan Peterson May 27 '20 at 17:21
  • @RyanPeterson I'm not sure I have good advice for a specific approach. Generally I would tend to look for a library that provides that kind of control out of the box whenever possible since they will generally already be set up to take care of all the edge cases you might run into – Kevin May 27 '20 at 20:00

0 Answers0