Topic: SideNav (SideNavCat/SideNavItem) collapsible issue

sourabha22 pro asked 6 years ago


Hi, there is a regression issue in V4.4.0 with respect to the SideNav where-in the SideNavItem(s) are not displayed on clicking SideNavCat.

There seems to be an issue while applying correct definition of CSS class "collapsible-body" in V4.4.0, which is preventing the side menu items from being displayed. Please find below my analysis/comparison w.r.t V4.3.0

Version 4.3.0:
1) Source code from SideNavCat.js

<Collapse isOpen = {isOpen} className = "collapsible-body">
<ul>
{children}
</ul>
</Collapse>

2) Generated html element (when side nav category is clicked)
<div class="collapse show collapsible-body">..</div>

3) CSS definition in bootstrap.css

.collapse.show {
display: block;
}

Result: Working as expected(Side Nav items are displayed when parent Side Nav Category is clicked/active)

Version 4.4.0:

1) Source code from SideNavCat.js

<Collapse isOpen = {isOpen}>
<div className="collapsible-body">
<ul>
{children}
</ul>
</div>
</Collapse>

2) Generated html element (when side nav category is clicked)
<div class="collapse show">

<div class="collapsible-body">..</div>

</div>

3) CSS definition
a) Following style is defined in SideNav.css [which is included in SideNavCat.js ->require('./SideNav.css');]

.collapsible-body {
display: block;
}

b) Following style is defined in mdb.css

.collapsible-body {
display: none;
}

Observation:
When running re-pro-4.4.0 as a standalone application, expected style (from SideNav.css is applied) because SideNav.css appears after mdb.css in the index.html file

However, when MDB is included as a dependency in CRA application (and when mdb.css imported in index.js), style defined in mdb.css is applied since it is the last style to be included in index.html

and by principle,
"When multiple rules of the same "specificity level" exist, whichever one appears last wins"

I hope this helps to confirm if this is an issue. Thanks.


sourabha22 pro commented 6 years ago

Other user reported similar issue: https://mdbootstrap.com/support/react-sidebar-accordion/

LRuan free answered 6 years ago


Hi, I've tried this solution, but it seems that I am still encountering the same issue. this time the mdb.scss overrides for .collapsible-body to display none, even though the style inline class says otherwise...   Please advise

Jakub Strebeyko staff commented 6 years ago

Hi there LRuan, First advice that pops into my mind is updating your MDB React package to 4.5.0. Issues with SideNavItem and SideNavCat (caused by waves effect in FireFox's event bubbling schema) have been tackled there, resulting in a slight open/close functionality remake, rendering the CSS .collapsible-body hotfix redundant. Check it out and let me know whether it helped. Best, Kuba

LRuan free commented 6 years ago

Hi, My mdbreact was already upgraded to 4.5, but issue still persists

Jakub Strebeyko staff commented 6 years ago

Hello there, I just downloaded the repo and checked out to 4.5.0 tag, yarn started it and opened in Chrome - it works. Please share minimum code snippet necessary to reproduce the bug, along with some environment details (a browser version, perhaps?) Thanks. Best, Kuba

Jakub Strebeyko staff answered 6 years ago


Hi there, You are right, the issue is indeed caused by C in CSS. While we develop a steady solution to be included in the next release, we offer two rather simplistic ways out for anyone, whose collapse content is not getting displayed. First way is to make sure that the styles get appended in proper order, meaning that the App.js (and all custom styles in brings to the table) gets added after the mdb.min.css file. Other way is to just add !important to the display: block style declaration in SideNav.css - this will make sure it does not get overwritten, no matter the order of files. Thanks big time for reaching out with your throughout analysis! This helps us big time. With Best Regards, Kuba

sourabha22 pro commented 6 years ago

Thank you Kuba for your quick response and suggestions. How will be the solution mentioned above be applicable in context of my application, 1) created using CRA 2) "mdbreact" is included as a package dependency in package.json 3) following lines are included in index.js as mentioned in the quick start guide, import 'font-awesome/css/font-awesome.min.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css'; One temporary solution i can think of (and have tested) is to add SideNav.css in my project alongside my SideNav component and include that as the dependency after mdb.css in index.js import 'font-awesome/css/font-awesome.min.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css'; import './app/layout/sidenav/SideNav.css'; Please advice in case i am missing anything. Thank you.

Jakub Strebeyko staff commented 6 years ago

Hi there, Actually, if the solution works it could be the best one yet, as it ensures the CSS rule will be added last every time. Good job! And thanks for taking time and reporting it. With Best Regards, Kuba

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags