Dropdown in navbar not work

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.

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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

TURKI Hosni 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:           Collapsible menu <a href="#">Link 1</a> <a href="#">Link 2</a>  Simple link  Collapsible menu 2 <a href="#">Link 1</a> <a href="#">Link 2</a>  Simple link 2       Material Design for Bootstrap  <a> Contact</a> <a> Support</a> <a> Account</a> <a> Dropdown </a> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a>

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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

Add comment

Hosboss pro answered 7 years ago

0 0 Best answer

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

TURKI Hosni pro commented 7 years ago

The problem occurs on the dropdown even outside the navbar

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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

TURKI Hosni pro commented 7 years ago

Did you receive my email ?

Damian Gemza staff commented 7 years ago

No, i didn't

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

About author

Hosboss

Pro User

12Support score
8Questions 9Answers

0Snippets likes 0Snippets