Topic: Problem with flipping cards

rdepablo free asked 2 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


rdepablo free answered 1 year 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 1 year 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


Marcin Luczak staff answered 1 year 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



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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.2
  • Device: All
  • Browser: Chrome, Safari
  • OS: Mobile, Linus
  • Provided sample code: No
  • Provided link: Yes