Dropdown in navbar not work

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

Add comment

Hosboss pro answered 7 years ago

0 0 Best answer

<pre>Start your code here

<header>

<mdb-sidenav #sidenav class="sn-bg-4 mask-strong" [fixed]="false">
 
 <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>
 
 
 <li>
 <ul class="social">
 <li><a class="icons-sm fb-ic"> </a></li>
 <li><a class="icons-sm pin-ic"> </a></li>
 <li><a class="icons-sm gplus-ic"> </a></li>
 <li><a class="icons-sm tw-ic"> </a></li>
 </ul>
 </li>
 
 
 <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>
 
 
 <li>
 <ul class="collapsible collapsible-accordion">
 <mdb-squeezebox [multiple]="false" aria-multiselectable="false">

<mdb-item>
 <mdb-item-head mdbRippleRadius> 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>

<mdb-item class="no-collase">
 <mdb-item-head mdbRippleRadius> Simple link</mdb-item-head>
 <mdb-item-body></mdb-item-body>
 </mdb-item>

<mdb-item>
 <mdb-item-head mdbRippleRadius> 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>

<mdb-item class="no-collase">
 <mdb-item-head mdbRippleRadius> Simple link 2</mdb-item-head>
 <mdb-item-body></mdb-item-body>
 </mdb-item>

</mdb-squeezebox>
 </ul>
 </li>
 
 </mdb-sidenav>

<mdb-navbar SideClass="navbar fixed-top navbar-expand-md scrolling-navbar double-nav" [containerInside]="false">
 
 <div class="float-xs-left">
 <a (click)="sidenav.show()" class="button-collapse"></a>
 </div>

<div class="breadcrumb-dn mr-auto">
 Material Design for Bootstrap
 </div>

<links>
 <ul class="nav navbar-nav nav-flex-icons ml-auto">
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius> Contact</a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius> Support</a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius> Account</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</pre>

Please insert min. 20 characters.

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

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

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

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

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

Simple link

Collapsible menu 2

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>

Please insert min. 15 characters.

Add comment