Topic: Dropdown in navbar not work
Hosboss pro asked 7 years ago
Damian Gemza staff answered 7 years ago
Hosboss pro commented 7 years ago
Did you receive my email ?Damian Gemza staff commented 7 years ago
No, i didn'tHosboss pro answered 7 years ago
Start your code here <!--Double navigation--> <header> <!-- Sidebar navigation --> <mdb-sidenav #sidenav class="sn-bg-4 mask-strong" [fixed]="false"> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a> </div> </li> <!--/. Logo --> <!--Social--> <li> <ul class="social"> <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li> </ul> </li> <!--/Social--> <!--Search Form--> <li> <form class="search-form" role="search"> <div class="form-group waves-light" mdbRippleRadius> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <mdb-squeezebox [multiple]="false" aria-multiselectable="false"> <!-- Collapsible link --> <mdb-item> <mdb-item-head mdbRippleRadius><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-item-head> <mdb-item-body> <ul> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li> </ul> </mdb-item-body> </mdb-item> <!-- Simple link --> <mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item> <!-- Collapsible link --> <mdb-item> <mdb-item-head mdbRippleRadius><i class="fa fa-eye"></i> Collapsible menu 2</mdb-item-head> <mdb-item-body> <ul> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li> </ul> </mdb-item-body> </mdb-item> <!-- Simple link --> <mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius><i class="fa fa-diamond"></i> Simple link 2</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item> </mdb-squeezebox> </ul> </li> <!--/. Side navigation links --> </mdb-sidenav> <!--/. Sidebar navigation --> <!-- Navbar --> <mdb-navbar SideClass="navbar fixed-top navbar-expand-md scrolling-navbar double-nav" [containerInside]="false"> <!-- SideNav slide-out button --> <div class="float-xs-left"> <a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a> </div> <!--/. SideNav slide-out button --> <!-- Breadcrumb--> <div class="breadcrumb-dn mr-auto"> <p>Material Design for Bootstrap</p> </div> <!--/. Breadcrumb--> <links> <ul class="nav navbar-nav nav-flex-icons ml-auto"> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a> </li> <li class="nav-item dropdown btn-group" dropdown> <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius> Dropdown </a> <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </links> Start your code here
Hosboss pro commented 7 years ago
The problem occurs on the dropdown even outside the navbarDamian Gemza staff answered 7 years ago
Damian Gemza staff answered 7 years ago
Hosboss pro commented 7 years ago
Hi Damian, I see the dropdown but nothing happens when I click on. Here is my package.json: ... "scripts": { "ng": "ng", "build": "ng build --prod", "start": "ng serve", "test": "ng test", "lint": "tslint ./src/**/*.ts -t verbose", "e2e": "ng e2e", "start:fr": "ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr", "build:fr": "ng build --prod --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr", "build-i18n:en": "ng build --output-path=dist/en --aot --prod --bh /en/ --i18n-file=src/locale/messages.en.xlf --i18n-format=xlf --locale=en", "build-i18n:fr": "ng build --output-path=dist/fr --aot --prod --bh /fr/ --i18n-file=src/locale/messages.fr.xlf --i18n-format=xlf --locale=fr", "build-i18n:es": "ng build --output-path=dist/es --aot --prod --bh /es/ --i18n-file=src/locale/messages.es.xlf --i18n-format=xlf --locale=es", "build-i18n": "npm run build-i18n:en && npm run build-i18n:fr && npm run build-i18n:es", "extract": "ng xi18n --outputPath=src/locale", "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server", "serve:ssr": "node dist/server.js", "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false", "webpack:server": "webpack --config webpack.server.config.js --progress --colors" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@agm/core": "^1.0.0-beta.2", "@angular/animations": "^5.1.2", "@angular/common": "^5.1.2", "@angular/compiler": "^5.1.2", "@angular/compiler-cli": "^5.1.2", "@angular/core": "^5.1.2", "@angular/forms": "^5.1.2", "@angular/http": "^5.1.2", "@angular/platform-browser": "^5.1.2", "@angular/platform-browser-dynamic": "^5.1.2", "@angular/platform-server": "^5.1.2", "@angular/router": "^5.1.2", "@angular/upgrade": "^5.1.2", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8", "@nguniversal/express-engine": "^5.0.0-beta.5", "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5", "angular-in-memory-web-api": "^0.5.0", "chart.js": "^2.5.0", "classlist.js": "^1.1.20150312", "codelyzer": "^4.0.2", "core-js": "^2.4.1", "easy-pie-chart": "^2.1.7", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "intl": "^1.2.5", "minimatch": "^3.0.4", "ng-mdb-pro": "git+https://oauth2:xxxxxxxxxxxxxxxxxx@git.mdbootstrap.com/mdb/angular/ng-pro.git", "regex-replace": "^2.1.0", "regexp-replace-loader": "^1.0.1", "rxjs": "^5.5.0", "screenfull": "^3.3.0", "ts-loader": "^3.1.1", "web-animations-js": "^2.3.1", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.5.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "^2.0.3", "@types/node": "^6.0.45", "jasmine": "~2.4.1", "jasmine-core": "~2.4.1", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-jasmine-html-reporter": "^0.2.2", "karma-phantomjs-launcher": "^1.0.2", "lodash": "^4.16.2", "phantomjs-prebuilt": "^2.1.7", "protractor": "~5.1.0", "string-replace-loader": "^1.3.0", "ts-node": "^3.3.0", "tslint": "^5.0.0", "typescript": "2.4.2", "@angular/language-service": "^5.1.2" }, ... I have no messages on the console. I test locally with wampserver64: Apache : 2.4.27 PHP 7.1.9 The code used in app.component.html: <!--Double navigation--> <!-- Sidebar navigation --> <!-- Logo --> <!--/. Logo --> <!--Social--> <i> </i> <i> </i> <i> </i> <i> </i> <!--/Social--> <!--Search Form--> <!--/.Search Form--> <!-- Side navigation links --> <!-- Collapsible link --> <i></i> Collapsible menu <a href="#">Link 1</a> <a href="#">Link 2</a> <!-- Simple link --> <i></i> Simple link <!-- Collapsible link --> <i></i> Collapsible menu 2 <a href="#">Link 1</a> <a href="#">Link 2</a> <!-- Simple link --> <i></i> Simple link 2 <!--/. Side navigation links --> <!--/. Sidebar navigation --> <!-- Navbar --> <!-- SideNav slide-out button --> <!--/. SideNav slide-out button --> <!-- Breadcrumb--> Material Design for Bootstrap <!--/. Breadcrumb--> <a><i></i> Contact</a> <a><i></i> Support</a> <a><i></i> Account</a> <a> Dropdown </a> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <!--/. Navbar --> <!--/.Double navigation-->FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No