Topic: Rotating cards don't work when added to DOM
We use Turbolinks in combination with OnMount to make our traditional MVC application feel like a modern SPA. Because of this our site rarely does a full page reload. For 90% of all MDB components this isn't an issue because they are initialized through a function. For example materialChip(), pickadate(), dropdown(),..
The rotating card doesn't have such an initialization function, instead it relies on document.ready (or rather the Jquery(func(){}) shorthand). So the rotation breaks for us until we do a full page refresh.
Now I know you must be thinking "this is such a niche setup, why should we support this". As demonstrated in the snippet below, anything code that modifies the DOM and doesn't rely on JQuery will have this issue. Also, most of your own code seems to already use initialization functions so it would be nice for consitency.
https://mdbootstrap.com/snippets/jquery/robin_deprins/2140921
Hi. This is because the on click event which we add after loading the page is missing. This element was not present after loading the page and the event was not added. Try add this after add rotating cart:
$('.rotate-btn').on('click', function () {
$(this).closest('.card').toggleClass('flipped');
})
Robin Deprins pro commented 5 years ago
That does fix the rotation. The MDB javascript also sets the height attribute of these rotating cards. I found the following code to copy to our own initialization function:
element.find(".card-rotating").each((function () { var e = $(this), i = e.parent(), n = e.find(".front"), l = e.find(".back"), o = e.find(".front").outerHeight(), a = e.find(".back").outerHeight(); o > a ? $(l).height(o) : o < a ? $(n).height(a) : $(i).height(a) }))
If we were using the share function or the map-card function we would also need to copy the code to re-initialize those. It would really be a lot easier if these cards had built-in initialization functions like the other components do.
Grzegorz Bujański staff commented 5 years ago
Not all components have an initialization function. Many of them, like this one, do not have such a function. At the moment we are not planning to add such function in this component.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.0
- Device: Dell
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: Yes