question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is your feature request related to a problem? Please describe. I tried to render the arrow behind a component by doing something like this:

<XArrow passProps={{ style: { zIndex: -1 } }} ... />

But it doesn’t work. Is there any way to do it at the moment?

Describe the solution you’d like There should be a zIndex prop that would be passed to the svg components of the arrow. Something like this:

<XArrow zIndex={-1} ... />

Describe alternatives you’ve considered

  • I tried changing the order they were rendered, but I need to create the start and end refs dynamically, therefore, I need to render the components before I render the connection between them (I’m using use-dynamic-refs for this).
  • I also tried setting opacity to 0.99 to see if the problem was with a Stacking Context, but it didn’t work.

Additional context I want a way for the connection to be displayed behind the little gray circles.

image

I’m using this library for a university project, so I really need a solution for this, even if it is just a hacky workaround.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
BKurzawacommented, Jul 15, 2021

@pmorim Try using divContainerStyle={{ zIndex: -1}}

0reactions
Eliav2commented, Jul 18, 2021

added in dev branch

Read more comments on GitHub >

github_iconTop Results From Across the Web

z-index - CSS: Cascading Style Sheets - MDN Web Docs
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger ...
Read more >
CSS z-index property - W3Schools
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element...
Read more >
z-index - CSS-Tricks
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is...
Read more >
Z-index and stacking contexts - web.dev
The z-index property explicitly sets a layer order for HTML based on the 3D space of the browser—the Z axis. This is the...
Read more >
Understanding Z-Index in CSS - Ahmad Shadeed
The z-index property defines the order of the elements on the z-axis. Basically, it works on elements with a position value other than...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found