MDB Pro Dropdown with no styles applied. How to fix?

Topic: MDB Pro Dropdown with no styles applied. How to fix?

octavian pro asked 5 years ago

Expected behavior expected behavion Actual behavior simple pro dropdown

Resources (screenshots, code snippets etc.)

 <div class="dropdown" mdbDropdown>
                    <button mdbDropdownToggle mdbBtn color="primary" class="dropdown-toggle waves-light" type="button"
                        mdbWavesEffect>Dropdown primary</button>
                    <div class="dropdown-menu dropdown-primary">
                        <a class="dropdown-item" href="#">Change password</a>
                        <a class="dropdown-item" href="#">Logout</a>
                    </div>
                </div>

Damian Gemza staff commented 5 years ago

Dear @octavian

I have tried to reproduce this problem both on MDB Angular Free and Pro, but without success - for me, every dropdown looks like in the docs.

Could you please point me out, how can I reproduce your problem?

Also does other components doesn't work too? Or only the dropdown?

Please show me your app.module.ts (or another module where you're importing MDB), angular.json, package.json files.

Add comment

octavian pro answered 5 years ago

0 0 Best answer

Hi Damian, Seems to be only for the dropdown.

AppModule:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

import { MDBBootstrapModulePro, MDBSpinningPreloader } from 'ng-uikit-pro-standard'; import { LoginComponent } from './login/login.component'; import { HeaderComponent } from './layout/header/header.component'; import { FooterComponent } from './layout/footer/footer.component';

// import ngx-translate and the http loader import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { HttpClient, HttpClientModule } from '@angular/common/http';

import { OrdersModule } from './orders/orders.module';

@NgModule({ declarations: [ AppComponent, LoginComponent, HeaderComponent, FooterComponent ], imports: [ BrowserModule, MDBBootstrapModulePro.forRoot(), AppRoutingModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }), OrdersModule ], providers: [ MDBSpinningPreloader ], bootstrap: [AppComponent] }) export class AppModule { }

// required for AOT compilation export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); }

MDB styles and scripts in Angular.json file:

"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/contract-financing", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": false, "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "node_modules/animate.css/animate.css", "src/styles.scss" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/easy-pie-chart/dist/easypiechart.js", "node_modules/screenfull/dist/screenfull.js", "node_modules/hammerjs/hammer.min.js" ] },

Dependencies in package.json:

"dependencies": { "@angular/animations": "~8.1.1", "@angular/common": "~8.1.1", "@angular/compiler": "~8.1.1", "@angular/core": "~8.1.1", "@angular/forms": "~8.1.1", "@angular/platform-browser": "~8.1.1", "@angular/platform-browser-dynamic": "~8.1.1", "@angular/router": "~8.1.1", "@fortawesome/fontawesome-free": "^5.9.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "@types/chart.js": "^2.7.55", "animate.css": "^3.7.2", "bootstrap": "^4.3.1", "chart.js": "^2.5.0", "easy-pie-chart": "^2.1.7", "hammerjs": "^2.0.8", "ng-uikit-pro-standard": "git+https://oauth2:**********@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git", "rxjs": "^6.4.0", "screenfull": "^3.3.0", "tslib": "^1.9.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.801.1", "@angular/cli": "~8.1.1", "@angular/compiler-cli": "~8.1.1", "@angular/language-service": "~8.1.1", "@types/node": "~8.9.4", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.4.3" }

To mention that if i take the dropdown code from jquery docs, styles are applied but the on click event not triggering the dropdown list. For angular even the styles are not applied and on click nothing happens.

I am new to using MDB components, any idea would be much appreciated. Thanks!

Add comment

Arkadiusz Idzikowski staff answered 5 years ago