Issue with other components - causing overlap

[fizcoder]

I'm experiencing an issue with other components causing an overlap for example if I have a dropdown using bootstrap, it gets overlapped with a near by component. See screenshot below:

The issue seems to be with the .react-card-flip and .react-card-flipper because when I disable the following in .react-card-flip:

perspective: 1000px;
transform-style: preserve-3d;

and disable the following in .react-card-flipper:

transform-style: preserve-3d;

It behaves fine. See screenshot below:

Do you know how to resolve this?

[fizcoder]

Any update on this? It's causing issues with other components. See screenshot.

[fizcoder]

bump

[sbardian]

@fizcoder I'm willing to look around and see what I see. Do you have a codesandbox.io to show this happening? Would speed things up if you had a working example of the issue.

[sbardian]

@fizcoder this seems to be an issue with the react flip cards having a separate context stack because of their transitions/animations. If possible one solution I can see at this point is to move the popup elements (date picker/etc) as siblings to the flip cards. This causes other issues with positioning the popups though. I will continue to look into it for a better solution.

[sbardian]

@fizcoder I have submitted a PR that should help with your issue. You will want to apply a reversed z-index layout to your flip cards. Last card low (1) first card high (1000) type of setup. This will allow your child elements (popups) of cards above to overlap (not fall behind) other flip cards below it. We will see what @AaronCCWong thinks of it, works fine in my testing.

[zach-luman]

Look forward to merging @sbardian 's PR.

[zach-luman]

any update here?

[sbardian]

bump @AaronCCWong

[zach-luman]

@sbardian It seems like this plugin is not being maintained anymore. Could you please guide me on how to apply your updates on my local?

[AaronCCWong]

Sorry for the delay. Will take a look by eod.

[sbardian]

Thanks @AaronCCWong !

[zach-luman]

@sbardian @AaronCCWong Setting 1000~0 as cardZIndex props to continuous flip cards doesn't resolve the issue yet.

[sbardian]

This worked with my testing. Do you have a codesandbox or some code to show me how you are using it?

[zach-luman]

this.state.vehicles.map((auction, index) => (
    <ReactCardFlip isFlipped={this.state.viewMode} flipDirection="vertical" cardZIndex={1000-index}>
       <div key="front"> ... </div>
       <div key="back"> ... </div>
    </ReactCardFlip>
))

[zach-luman]

http://prntscr.com/n39zjr @sbardian any idea?

[sbardian]

hmm not sure. seems fine here, threw this together really quick.

https://codesandbox.io/s/3y7x40m871

Might be some other css going on? Hard to say from the screenshot.

[sbardian]

http://prntscr.com/n39zjr @sbardian any idea?

Probably already did this, but . . . css change sooo CTRL+F5? or Shift+Command+R ? stupid but . . maybe ?

[zach-luman]

https://codesandbox.io/embed/53only1j54 @sbardian Actually, your code doesn't work.

[sbardian]

@zach-luman I started checking other browsers, are you on chrome? You are right, this doesn't seem to be working on chrome from what I'm seeing at this point. Let me review further.

[sbardian]

@zach-luman in Chrome open up dev tools and add position: relative; to the react-card-flip class. This seems to do the trick in chrome, but I will have to test further before pushing another PR.

[sbardian]

Yup from what I see setting position: relative on the class react-card-flip seems to do the trick to fix this in Chrome and doesn't seem to break FireFox. #42 would handle this as you could pass this to the container, or I could push another PR to add this to the container. @AaronCCWong do you have a preference on this one? Adding position: relative is more specific than just spreading styles across the container. Spreading styles across the container does allow users freedom, but opens them up to breaking functionality, but I guess that would be on them? I leave it to you, let me know if you want a PR or if you will pursue #42

[AaronCCWong]

@sbardian I will play around with position: relative to see if it affects the functionality. Using relative positioning has caused problems in the past.

[satyasonu]

Can anyone please let me know how to overcome this overlapping issue by addingposition: relative here? using login page inside this component and causing overlap to sidebar in mobile view.