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 ?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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
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,