Topic: navbar dropdown don't disappear after clicking on its submenu
I'm using free MDB with Angular. (Angular 5) (angular-bootstrap-md@5.2.2)
When I click on a dropdown on a navbar then the submenus pop up and after I click on a submenu the dropdown list don't disappear. I have to click somewhere else to close the dropdown list. This problem appears on PC big screen, but when I use my app on mobile then the dropdown works correctly. What is the solution?
My code:
<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark indigo" [containerInside]="false">
<logo>
<aclass="navbar-brand"routerLink="/">
<b>ePharma</b>
</a>
</logo>
<links>
<ulclass="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link waves-light" mdbRippleRadius routerLink="/">
<b>ePharma</b>
</a>
</li> -->
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light">
Műveletek
<spanclass="caret"></span>
</a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/muveletek/beteg-list">Beteg</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/muveletek/eset-list">Eset</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/gyogyszereles">Gyógyszerelés</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/muveletek/hely">Hely</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/muveletek/orvos">Orvos</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light">
Szótárak
<spanclass="caret"></span>
</a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/szotarak/bno">BNO</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/szotarak/cikk">Cikk</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/szotarak/cikk-mennyisegi-egysegek">Cikk mennyiségi egységek</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/szotarak/keszlet">Készlet</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/szotarak/mennyisegi-egysegek">Mennyiségi egységek</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/szotarak/raktar">Raktár</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light">
Rendszer
<spanclass="caret"></span>
</a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/felhasznalo">Felhasználó</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/gyogyszereles-kuldes">Gyógyszerelés küldés</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/idoszak">Időszak</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/napszak">Napszak</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/hely-tipus">Hely Típus</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/intezmeny-konfiguracio">Intézmény konfiguráció</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/adataim">Adataim</a>
<aclass="dropdown-item waves-light"mdbRippleRadiusrouterLink="/rendszer/szerepkor">Szerepkör</a>
</div>
</li>
<liclass="nav-item">
<aclass="nav-link waves-light"mdbRippleRadiusrouterLink="/listak/listak">Listák</a>
</li>
<liclass="nav-item">
<aclass="nav-link waves-light"mdbRippleRadiusrouterLink="/login">Login</a>
</li>
</ul>
</links>
</mdb-navbar>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 7 years ago
Dear Pitka, I have used the basic example from our navbars: https://mdbootstrap.com/angular/components/navbars/, and for me, everything is working fine. When I click on some items from navbar's dropdown, the dropdown is hiding. So it's proper behavior. If this example won't work to you, please upgrade your angular-bootstrap-md to latest 5.2.3 version, and check again. If still, it won't work, please provide me your environment informations (angular version, typescript, cli, node, os, browser). Best Regards, DamianPitka Guru commented 7 years ago
The 5.2.3 version solved the problem. Thank You very much! :)zozo pro commented 7 years ago
Hello, I tried to download the latest 5.2.3 (pro), but when I download, in the readme I see it is 5.2.2. How can I get the latest version?Damian Gemza staff commented 7 years ago
Dear zozo, The latest version of MDB Angular is 6.0.2, compatible with Angular 5 / 6. Best Regards, Damian