Topic: Collapse doesn't work with d-* classes
Using classes like d-flex or d-sm-block does not work well with collapse because they use !important in the CSS, whereas collapse does not. Using a wrapper is not always an option.
Note that for the correct functioning of collapse it is necessary to set the display: none after collapsing the element. By setting d-flex you change the display to flex. Therefore, it will not work properly. Unfortunately, it is not possible to change the display property here. Unfortunately, it is not possible to change the display property using the d-flex class for this element.
But you can do it by adding the css code:
.collapse.show {
display: flex;
}
UNNdev priority commented 3 years ago
You could fix this in the framework if you wanted by simply adding more specific rules such as .d-flex.collapse { display: none !important }. The only reason this does not work out of the box is that d-flex sets the display style with !important while collapse does not use !important on its display: none. But I guess this is an edge case and adding additional CSS rules for all possible combinations, especially including the responsive ones, would bloat up the CSS.
Grzegorz Bujański staff commented 3 years ago
In this case, we mainly want it to be consistent with the bootstrap collapse and d-flex. Additionally, as you have noticed, this is an edge case, and each additional code increases the size of our library, which will affect the speed of page loading. Therefore, in this case, we recommend that you make the change yourself.
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: 3.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: No
Grzegorz Bujański staff commented 3 years ago
Can you say something more? Send a snippet with an example here.
UNNdev priority commented 3 years ago
Seriously? https://mdbootstrap.com/snippets/standard/kayem79/2878127#html-tab-view Just copy-paste your own example from the documentation and add a
d-flexto the collapseddiv.