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:closed
  • Created 6 years ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

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.

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issues · AaronCCWong/react-card-flip - GitHub
React component for card flipping animation. Contribute to AaronCCWong/react-card-flip development by creating an account on GitHub.
Read more >
Safari - Card not resizing as expected after flip - Stack Overflow
Solved! If anyone comes across this issue, swing into ReactCardFlip.ts in your node modules, and remove the width: 100% on line 64.
Read more >
Magic Flip Cards: Solving A Common Sizing Problem
In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves ...
Read more >
React-card-flip, Map through data and flip one card at a time ...
Coding example for the question React-card-flip, Map through data and flip one card at a time-Reactjs.
Read more >
react-card-flip - npm
Keywords · Install · Repository · Homepage · Weekly Downloads · Version · License · Unpacked Size · Total Files.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found