Problem with flipping cards


Topic: Problem with flipping cards

rdepablo pro premium priority asked 4 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.)

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


Marcin Luczak staff answered 4 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: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2869522

Regards, Marcin


rdepablo pro premium priority answered 4 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.

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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