CODEWITHSUNDEEP
javascriptcssreactjsflexbox
P4TRYK
P4TRYK

Reputation: 169

React Flip-Card bug on the back of card

I am trying to provide to my React project the React Flip-Card from this library: https://github.com/mzabriskie/react-flipcard

In styling, we're using the 'reflexbox'.

The problem is with the Back of the Icon (also the text). The front of the image (I am using the svg) is in the proper position, but a back of icon is "under". I'm trying to change the and change the position for class and change the position, but not working.
Injected style provide by React-FlipCard: https://github.com/mzabriskie/react-flipcard/blob/master/lib/helpers/injectStyle.js

and I changed:

.ReactFlipCard__Front, .ReactFlipCard__Back {
position: inherit;

To show the problem I provide the .gif and .png

GIF: https://gyazo.com/924c7c6d949fca49747c98b14f36b596

PNG: https://i.sstatic.net/VYQD2.jpg

BACK wrong position PNG: https://i.sstatic.net/Bayta.jpg

In JavaScript I am using the basic code for states and return the Flipcard

https://pastebin.com/Xv5zW6Nq

and In the child I just inject the Icon

https://pastebin.com/jAv291Fe

Flexbox looks ok, something wrong with this FlipCard css.

Upvotes: 3

Views: 882

Answers (1)

P4TRYK
P4TRYK

Reputation: 169

Ok, solved. I added to node_modules class 

.ReactFlipCard__Back
position: absolute;

Maybe someone will use it in the future.

Upvotes: 1

Related Questions