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.

ReactCardFlip causing incorrect sizing

See original GitHub issue

Issue Description

Here’s what my first card looks like before implementing RCF: screen shot 2017-05-22 at 11 23 31 am

And here’s how it looks after implementing RCF: screen shot 2017-05-22 at 11 23 49 am

Material-ui’s Card components are supposed to take the height and width of the components inside. But for some reason, when implementing RCF, it’s forcing the Card component to take the size of it’s relative Cards in a GridList?

Issue Analytics

State:
Created 6 years ago
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

AaronCCWongcommented, May 23, 2017

The problem here is the GridTile component. If you give that a height of 400px it’ll fix the problem. This occurs because ReactCardFlip depends on position absolute to be able to create the appearance of a single card flipping back and forth. When an element is positioned absolute, it no longer takes up space in the DOM so your GridTile component doesn’t know that it needs to be 400px in height.

0reactions

AaronCCWongcommented, May 23, 2017

Having the card adapt automatically to the contents of the card is actually an interesting question because for that to be possible, we would actually need to remove position absolute which would break the functionality of ReactCardFlip.

On your question about filling up the space with GridList and GridTiles maybe flexbox could be of some help? Unfortunately I have never used those components so I am not too familiar with them.

Do let me know if you think you have a good solution to the first question though. Closing this issue. Feel free to open up another issue if you have any more problems.