search

mdbootstrap / mdb-angular-ui-kit

Angular 18 & Bootstrap 5 & Material Design UI KIT
https://mdbootstrap.com/docs/angular/
Other
1.12k stars 280 forks source link

Dropdown autoclose doesn't work in navbar #69

Closed jnels124 closed 6 years ago

jnels124 commented 6 years ago

Having a navbar with multiple dropdowns doesn't function correctly. The dropdowns do not close when clicking on other items in the navbar.

Looking at the code it appears to be caused by the mdbRippleRadius. When these elements are clicked the first line in the method is event.stopPropagation() which prevents the dropdown from closing.

using version 5.2.2

`<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top" [containerInside]="false" >

`

Bloodcast69 commented 6 years ago

Dear @jnels124 , I've just cloned fresh MDB Angular free from this github repo, and for me, everything is working just fine. I used your code, but added there also 2 links. When I click on dropdown button, he shows correctly, and if I click on other buttons, it hides correctly. Please verify, if you're using the latest version. This problem was actually fixed in 5.2.1 release. Best Regards, Damian

jnels124 commented 6 years ago

I am using 5.2.2. When I use 5.2.1 I get the below error. Also worth noting, I am using the scss and I am on a linux machine using google chrome.

OS: Linux archlinux 4.15.9-1-ARCH #1 SMP PREEMPT Sun Mar 11 17:54:33 UTC 2018 x86_64 GNU/Linux

browser: Google Chrome 65.0.3325.162 (same happens on chromium with this version)

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./node_modules/angular-bootstrap-md/scss/mdb-free.scss Module build failed: } ^ Invalid CSS after " }": expected "}", was "<<<<<<< HEAD" in /home/jesse/development/MessagingAngular/messaging-ui/node_modules/angular-bootstrap-md/scss/angular/free/_navbar.scss (line 51, column 6) Error: } ^ Invalid CSS after " }": expected "}", was "<<<<<<< HEAD" in /home/jesse/development/MessagingAngular/messaging-ui/node_modules/angular-bootstrap-md/scss/angular/free/_navbar.scss (line 51, column 6) at options.error (/home/jesse/development/MessagingAngular/messaging-ui/node_modules/node-sass/lib/index.js:291:26) @ ./node_modules/angular-bootstrap-md/scss/mdb-free.scss 4:14-163 @ multi ./node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss ./node_modules/angular-bootstrap-md/scss/mdb-free.scss ./node_modules/font-awesome/scss/font-awesome.scss ./src/styles.scss

Bloodcast69 commented 6 years ago

You're getting errors which we've fixed few updates ago.. Please remove your angular-bootstrap-md and type npm install angular-bootstrap-md --save one more time. Best Regards, Damian

jnels124 commented 6 years ago

I only get this error when I explicitly request version 5.2.1. Ok, looks like it is now fixed in 5.2.3. I was previously using 5.2.2 as this was the latest version a couple days ago.

Thanks.