Topic: Problem with flipping cards

rdepablo priority asked 3 years ago

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.)

Here you have a short video, rotating the card, so you can identify the problem!Ar1XIue6B0t0iZFizOmrFbAlEABb8A?e=b1D6pI

rdepablo priority answered 3 years ago

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.


Marcin Luczak staff commented 3 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:

I hope this will help with your problem.

Regards, Marcin

Marcin Luczak staff answered 3 years ago

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:

Regards, Marcin

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • 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