Rotating card height with collapse


Topic: Rotating card height with collapse

lassekofoed asked 5 years ago

Expected behavior When a collapse is unfolded the card height expands with it.

Actual behavior Card wrapper stays same height

When using a collapse element inside a rotating card, the card-wrapper height is not updated.

Resources (screenshots, code snippets etc.)

This helped me:https://mdbootstrap.com/support/jquery/rotating-card-height/Using the code giving above, I handle it this way

$('.card-rotating .collapse').on('hidden.bs.collapse', function () {
    AdjustCardWrapperMinHeight($(this).parents(".card").attr("id"));
});

$('.card-rotating .collapse').on('shown.bs.collapse', function () {    
    AdjustCardWrapperMinHeight($(this).parents(".card").attr("id"));
});

function AdjustCardWrapperMinHeight(cardId) {
    var frontHeight = $("#" +cardId).find("div.front:first").height();    
    var backHeight = $("#" + cardId).find("div.back:last").height();

    var height = frontHeight;
    if (backHeight > height) {
        height = backHeight;
    }
    //My minimum height had to be 500.
    if (height < 500) {
        height = 500;
    }
    $("#" + cardId).parents("div.card-wrapper").css("min-height", height);
}

As the event used is when animation is done, there is no smooth transition.Maybe this should be part of the Core ?


Mateusz Łubianka staff commented 5 years ago

Hi @lassekofoed, please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.14.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes