Topic: collapsable initialization after importing mdb 7.2.0 UMD .show
Yvonne Findeis priority asked 1 week ago
Expected behavior
Whenever initialising a collapsable Element with new mdb.Collapse(element) it should initiate hidden. ( Or beeing configurable)
Actual behavior
Single Page Application dynamically loading MDB Elements.
Page initialises with
<head>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/8.1.0/mdb.min.css"
rel="stylesheet"
/>
and
later a collapsable Element ist loaded and initialised with
new mdb.Collapse(element);
let collapsableElements = document.querySelectorAll('.collapse');
if (collapsableElements) {
collapsableElements.forEach((collapsableElement) => {
const test = new mdb.Collapse(collapsableElement);
test.hide();
});
}
first, this goes through show() methode of collapse.js (why? ist this configurabel via options in initialization?).
show() {
if (this._isTransitioning || this._isShown()) {
return;
}
let activeChildren = [];
// find active children
if (this._config.parent) {
activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES)
.filter((element) => element !== this._element)
.map((element) => Collapse.getOrCreateInstance(element, { toggle: false }));
}
if (activeChildren.length && activeChildren[0]._isTransitioning) {
return;
}
const startEvent = EventHandler.trigger(this._element, EVENT_SHOW);
if (startEvent.defaultPrevented) {
return;
}
for (const activeInstance of activeChildren) {
activeInstance.hide();
}
const dimension = this._getDimension();
this._element.classList.remove(CLASS_NAME_COLLAPSE);
this._element.classList.add(CLASS_NAME_COLLAPSING);
this._element.style[dimension] = 0;
this._addAriaAndCollapsedClass(this._triggerArray, true);
this._isTransitioning = true;
const complete = () => {
this._isTransitioning = false;
this._element.classList.remove(CLASS_NAME_COLLAPSING);
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW);
this._element.style[dimension] = '';
EventHandler.trigger(this._element, EVENT_SHOWN);
};
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
const scrollSize = `scroll${capitalizedDimension}`;
this._queueCallback(complete, this._element, true);
this._element.style[dimension] = `${this._element[scrollSize]}px`;
}
and before the completet() callback ist run, the hide() mthode gets called and does not get executed because the element is still in transition.
In my Stackblitz this is demonstrated by importing mdb before or after the initialisation.Why is hide() not executed and howto initialize the correct way?
Resources (screenshots, code snippets etc.) https://stackblitz.com/edit/stackblitz-starters-svwna1?file=index.html
Kamila Pieńkowska staff answered 1 week ago
Here is a snippet for you: https://mdbootstrap.com/snippets/standard/kpienkowska/6327507
You can set collapse not to toggle on init, so you won't have to hide it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes