Topic: Problem with flipping cards
Expected behavior
The content after a flipping card is not showed in the right position, sometimes it shows under the flipping card when you rotate the card you can see it, and in mobile browsers is showed over the card.
Actual behavior
As described below, I have tried to include the flipping card in different layout elements as container, section, row but the problem persists.
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/jquery/rdepablo/2869256
Here you have a short video, rotating the card, so you can identify the problem
https://1drv.ms/u/s!Ar1XIue6B0t0iZFizOmrFbAlEABb8A?e=b1D6pI
Hello @rdepablo,
Thank you for pointing this out. I've added this to our issue list, and we will work on a fix for that. As a 'quick-fix' for that please explicitly add the height style value to the card-wrapper element as its default value is 0. Please see my snippet with this quick-fix: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2869522
Regards, Marcin
Thanks for your answer.
Explicitly add the height style value can be a solution in a lot of scenarios, but in my case the web is responsiveness so if the device changes their orientation the height changes, and we get similar problems,
I would like to have a solution for all the scenarios, because the effect is really good, and it likes a lot.
thanks
Marcin Luczak staff commented 4 years ago
Thank you for your kind feedback. I've updated my snippet so the card can dynamically set its width and height based on its content and react to window resize: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2869522
I hope this will help with your problem.
Regards, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.19.2
- Device: All
- Browser: Chrome, Safari
- OS: Mobile, Linus
- Provided sample code: No
- Provided link: Yes