How to make absolute positioned elements overlap re-flex container about re-flex

[junyuanz123]

Thank you so much!

[leefsmp]

I'm not sure what you are trying to do exactly, my guess is that there are several workarounds that you could try. Maybe you would need to use an other custom component inside the ReflexElement and overflow from this one so you have complete control. You can also pass a custom class to an element ReflexElement className="my-class" so you can overwrite its default css properties... If you could put a codepen or similar with a demo of what you are trying to achieve I can take a look. Here is a pen demo using reflex I created a while ago to use as a starting point.

[junyuanz123]

Thanks for the reply. So here is a demo i created: https://codepen.io/anon/pen/ypPJgW

What I am trying to do is make the hidden part visible.

<div
  style={{
    position: 'absolute',
    width: '200px',
    height: '100px',
    backgroundColor: 'white',
    top: '-50px',
    right: '-100px',
  }}
>
  test
</div>

[junyuanz123]

I also tried to add a div wrapper. https://codepen.io/anon/pen/zpPBwG

But this method will add a scrollbar, which is different from what I want.

[leefsmp]

I am just adding overflow: visible to the left-pane class and z-index: 1000 for the white div and it works:

.left-pane {
    background-color: rgb(34, 34, 34);
    overflow: visible;
    color: #03d8ff;
}

<ReflexElement className="left-pane">
        <div
          style={{
            position: 'absolute',
            width: '200px',
            height: '100px',
            backgroundColor: 'white',
            top: '-50px',
            right: '-100px',
            zIndex: 1000
          }}
        >
          test
      </div>
</ReflexElement>

[junyuanz123]

Thanks for the reply.

Sorry, I modified the example, here is actually how I use re-flex in our product, https://codepen.io/anon/pen/qpVNvX

If I add overflow: visible !important to the test class, then it will take the full space.

[leefsmp]

After looking a bit into it, I unfortunately don't have a suggestion for you. I'm not sure that what you are looking for is doable and I don't see a strong use case for such feature so I will close this issue as "out-of-scope" for the time being. I would recommend you take a look at combining the reflex layout with other library such as react-portal to get the desired result or something similar to react-bootstrap overlays which I successfully used in my app with reflex.

Hope that helps.

[leefsmp]

I tried one more time and I think that by setting the test class as follow it produces the result you are looking for (I also had to set overflow: visible !important; on the outer ReflexElement to get the div visible on the right-pane):

.test {
    overflow: visible !important;

    & > div {
       height: auto !important;
    }
}

[gamerkonks]

When I add css to ReflexElement that has overflow: visible !important, my splitter is no longer movable. Is there anyway to have overflow: visible and a working splitter?

[leefsmp]

What are you trying to do exactly? can you share a codepen/sandbox that shows the issue? Did you try to add css to an inner div inside ReflexElement instead?

[gamerkonks]

I'm trying to make it so that I can drag the splitter to the left or right, but the text is still visible if the splitter is dragged past the text (See screenshot). Or if there's some way of displaying the text below the splitter. I tried displaying the value in a div outside the ReflexContainer, but it would only update after releasing the splitter, I couldn't get it to update while dragging the splitter.
Codepen here: https://codepen.io/gamerkonks/pen/NWaPNQM

Thanks.

[leefsmp]

seems over complicated to me, why don't you add an overlay div on top of the reflex container and use pointer-events: none on it so it doesn't block user interaction?