NavbaR DROPDOWN not closing after click

[routerLink]="['/']"

Alberto pro commented 7 years ago

Damian, it works in mobile view. It's in desktop view that it doesnt. And I did add [routerlink]="['/mylink']" to all without success

---

Damian Gemza staff commented 7 years ago

Dropdown doesn't hide in desktop ? If yes, please try to delete from it directive mdbRippleRadius.

---

Alberto pro commented 7 years ago

That was it. mdbRippleRadius. Now it works but doesn't look like material withot the ripple...

---

Alberto pro commented 7 years ago

Also another thing that doesn't work anymore is hide(); I have a listener on window scroll to close the dropdowns if the user scrolls and now it doesn't work. If I call the navbar hide method it hides it and then immediately it reappears. I tried closeNavbarOnClick but it doesn't do anything. This code used to work // Hack to close the navbar if window is scrolled away @HostListener("window:scroll", []) onWindowScroll() { if (this._navBar.shown) { this._navBar.hide();} }

---

Damian Gemza staff commented 7 years ago

Yes, Alberto, i know about that problem. We're working about fixing this case. In next releases we'll put fix that allows you to use mdbRippleRadius directive and hide properly dropdowns after clicking somewhere. Best Regards, Damian

---

osoverflow pro commented 7 years ago

I have the same problem. On desktop with mdbRippleRadius it does not close, but without that mdbRippleRadius it closes.

---

Damian Gemza staff commented 7 years ago

Dear osoverflow, Could you please tell me, which version of MDB do you use in your project? This problem was fixed in 5.2.1 release of MDB Angular. If you're using something below that version, please upgrade it. Best Regards, Damian

---

osoverflow pro commented 7 years ago

It is this: "angular-bootstrap-md": "^5.2.2",

---

Damian Gemza staff commented 7 years ago

And for 5.2.2 mdbRippleRadius directive doesn't work? We've tested this few times and it was working perfectly. Could you show me your code?

---

osoverflow pro commented 7 years ago

<!-- Dropdown --> <li class="nav-item dropdown btn-group" dropdown *ngIf="auth.isAuthenticated()|async"> <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light"> <i class="fa fa-user"></i> Mi Cuenta </a> <div *dropdownMenu class="dropdown dropdown-menu dropdown-primary dropdown-menu-right" role="menu"> <a class="dropdown-item waves-light" routerLink="/support"><i class="fa fa-question"></i> Soporte</a> <a class="dropdown-item waves-light" routerLink="/tutorial"><i class="fa fa-product-hunt"></i> Tutorial</a> <a class="dropdown-item waves-light" routerLink="/history"><i class="fa fa-history"></i> Historial</a> <div class="divider dropdown-divider"></div> <a class="dropdown-item waves-light" (click)="logout()"><i class="fa fa-sign-out"></i> Salir</a> </div> </li>

---

osoverflow pro commented 7 years ago

I removed the mdbRippleRadius on all the links because the problem

---

Damian Gemza staff commented 7 years ago

I've added to your code mdbRippleRadius in every place. Tested this on MDB Angular Free 5.2.1 and on MDB Angular Pro my developers version for next update, and for me, everything is working fine. I've got two dropdowns. When i open one, and click to another, first dropdown is closing and second is showing. So I can't see any problem there. Are you sure, that you're using right version of our MDB? Which version do you use? Free or Pro? And in which way did you installed it ?

---

osoverflow pro commented 7 years ago

I'm using the free version while I get access to the pro version. I installed following the instructions npm i angular-bootstrap-md --save Found in: https://mdbootstrap.com/angular/5min-quickstart/

---

Damian Gemza staff commented 7 years ago

Could you please send me your project without node_modules folder at d.gemza@mdbootstrap.com ?

---