Clever Geek Handbook

React Flip-Card error on the back of the card

I'm trying to provide a React React project with a Flip-Card from this library: https://github.com/mzabriskie/react-flipcard

We use "reflexbox" for styling.

The problem is the reverse icon (also in the text). The front of the image (I'm using svg) is in the correct position, but the back of the icon is “under”. I am trying to change and change position for a class and change position, but not working.
The nested style is provided 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 .gif and .png

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

PNG: http://imgur.com/a/nQtLN

RETURN wrong PNG position: http://imgur.com/a/RJbEW

In JavaScript, I use basic code for states and return Flipcard

https://pastebin.com/Xv5zW6Nq

and in the child i just insert Icon

https://pastebin.com/jAv291Fe

Flexbox looks ok, there is something wrong with this css flip card.

+3


source to share


1 answer


Okay, it's settled. I added to node_modules class

.ReactFlipCard__Back
position: absolute;


Maybe someone will use it in the future.

+1


source






More articles:


All Articles