Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Dynamic height on the rotating card

decosvaldo pro asked 5 years 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.)


MDBootstrap staff commented 5 years 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 5 years 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 5 years ago

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

Thanks.


MDBootstrap staff answered 5 years 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.10
  • Device: PC
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No