Dynamic height on the rotating card

web
mobile

Topic: Dynamic height on the rotating card

decosvaldo pro asked a week ago

Expected behavior Could you help me to make all my rotating-cards to have dynamic height so the content do not overflows? I have different cards with different size needs on the same page.

Actual behavior The cards within this rotating feature have fixed height. Resources (screenshots, code snippets etc.)


Piotr Obrebski staff commented a week ago

You can modify this behaviour of our rotating cards. Please provide the snippet example of your development so I can help you achieve the desired result. https://mdbootstrap.com/snippets/

Best Regards, Piotr


decosvaldo pro commented a week ago

Here it is. Note that I'm using min-height for each card, because they have different sizes and contents, and they're being generated dynamically by my database. So, if they could adjust dynamically like the other cards would be very helpful to me.

https://mdbootstrap.com/snippets/jquery/decosvaldo/1286878


decosvaldo pro commented a week ago

Also, adjusting the cards dynamically also helps me when the screen resolution changes

Thanks.


Piotr Obrebski staff answered a week ago

Hi decosvaldo,

The problem here is that the rotating card is in fact 2 elements. You need this 2 elements to be equal height. You can achieve that by setting breakpoints or simply setting the height of this components in a variable. If you want the simple solution just create @media query that will style height of this rotating card according to the desired device height.

Best Regards, Piotr


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.10
  • Device: PC
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No