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.


octavian pro answered 5 years ago

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!


Arkadiusz Idzikowski staff answered 5 years ago

The 's' is missing in your MDB module import. If you want to import all MDB modules you need to use MDBBootstrapModulesPro.forRoot().

You can find the modules list here:https://mdbootstrap.com/docs/angular/getting-started/modules/


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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: Responsive
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags