Topic: Collapse doesn't work with d-* classes

UNNdev priority asked 3 years ago

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.

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? Just copy-paste your own example from the documentation and add a d-flex to the collapsed div.

Grzegorz Bujański staff answered 3 years ago

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: {
  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.

Please insert min. 20 characters.


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



Specification of the issue

  • 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