react-card-flip: Issue with other components - causing overlap

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:

Overlap issue

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:

dropdown showing fine

Do you know how to resolve this?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 23 (13 by maintainers)

Most upvoted comments

Thanks @AaronCCWong !

sbardian on Mar 26, 2019

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

AaronCCWong on Mar 27, 2019

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

AaronCCWong on Mar 26, 2019

@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.

sbardian on Mar 14, 2019