Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Dropdown in navbar not work

Hosboss pro asked 7 years ago


the dropdown in the navbar does not work in production (on wampserver for example, nor on my host). Locally with ng serve it works.

Damian Gemza staff answered 7 years ago


Hello Turki, Your's code is working on my pc without problems. Please send me your's whole project without node_modules @ d.gemza@mdbootstrap.com Best Regards, Damian

Hosboss pro commented 7 years ago

Did you receive my email ?

Damian Gemza staff commented 7 years ago

No, i didn't

Hosboss 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 navbar

Damian Gemza staff answered 7 years ago


Please paste here code from your's component, but please, use preformatted code, that I can read it.

Damian Gemza staff answered 7 years ago


Hi Turki, The dropdown in navbar doesn't show on prod? I can't reproduce that case. On my machine everything is working okay. Please send me some logs, environment configuration, package.json. Please check browser console for some errors. Best Regards, Damian

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-->


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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