Dynamic height on the rotating card


Topic: Dynamic height on the rotating card

decosvaldo pro asked 8 months 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 8 months 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 8 months 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.


decosvaldo pro commented 8 months ago

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


Piotr Obrebski staff answered 8 months 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.


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