1

Is there a React/javascript based solution to fix the overflow-x-visible with overflow-y-auto issue?

I have a sticky sidebar in React that when clicked will reveal an options menu (see screenshots below). Researching, overflow-x-visible with overflow-y-auto is a ongoing issue. I've implemented a number of the proposed solutions including: style="padding-bottom: 250px; margin-bottom: -250px; and creating a wider div container here and here. I've also been working through this tutorial. However, I can't get it to work for my use case.

Shortened code using Tailwind CSS:

<Sidebar className="h-96 overflow-y-auto overflow-x-visible">
    <SidebarItemNew className="relative">      
         <DropdownOptions className="absolute"/>
    </SidebarItemNew>     
</Sidebar>

Overflow X visible. This is what I want to accomplish but with a y auto scrollbar

Overflow Y auto, X-Visible (code shown above)

Any way to get this working for React? Thanks for the help!

j08691
  • 204,283
  • 31
  • 260
  • 272
PurplePineapple
  • 41
  • 1
  • 5
  • Could it be a problem with z-index ? If the container on the right is a different component it might be a problem with stacking [The stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) (I'm speculating) – RDU Sep 21 '21 at 14:59
  • @RDU Your comment made me think and I'm going to explore portals in react: https://reactjs.org/docs/portals.html. From the docs: "A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips." Sounds promising! – PurplePineapple Sep 21 '21 at 23:01
  • We don't so "SOLVED" in the questions here. If you discovered your own answer, you can post and accept it. Otherwise you can delete your question – j08691 Sep 22 '21 at 13:22
  • 1
    @j08691 Noted, thanks! – PurplePineapple Sep 22 '21 at 13:23

1 Answers1

0

To fix this issue, I used React Portal to break the child element out of into its own DOM node. Then I used React Popper following this tutorial. It works great now!

PurplePineapple
  • 41
  • 1
  • 5