Topic: Css not applying correctly

Mike Lupo premium asked 4 years ago


Expected behavior I expect when i click on a dropdown, the mega menu appears like the example on the site shows. Actual behavior it seems that there is a TON of css missing like wrong widths and stuff Resources (screenshots, code snippets etc.)rendered page index.html console


Krzysztof Wilk staff commented 4 years ago

Hi!

Are you trying to attach jQuery to your Angular project? Or it's Angular core styles?

For now, I recommend you this solution https://stackoverflow.com/questions/54706459/add-bootstrap-4-to-angular-6-or-angular-7-application


Mike Lupo premium commented 4 years ago

Im trying to attach jQuery to my Angular project, i followed the link you sent however now my console shows an error

Uncaught TypeError: Cannot assign to read only property 'exports' of object '[object Object]' at Object. (mdb.min.js:30) at Object.push../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:30) at n (mdb.min.js:25) at Module.push../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:25) at n (mdb.min.js:25) at Object.push../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:25) at n (mdb.min.js:25) at mdb.min.js:25 at Object../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:25) at webpack_require (bootstrap:78)


Krzysztof Wilk staff commented 4 years ago

Hmm, try not to install MDB via npm, but add it to assets folder, then connect in angular.json


Mike Lupo premium commented 4 years ago

I did that. Same issue as above


Krzysztof Wilk staff commented 4 years ago

Could you paste here your angular.json file or if you have a sample app with config, could you send it on my e-mail? k.wilk@mdbootstrap.com


Mike Lupo premium commented 4 years ago

Ill do both.. { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "AtomicWolf": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/AtomicWolf", "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": [ "src/styles.css", "src/assets/mdbootstrap/css/bootstrap.min.css", "src/assets/mdbootstrap/css/mdb.min.css", "src/assets/mdbootstrap/css/style.css" ], "scripts": [ "src/assets/mdbootstrap/js/jquery.min.js", "src/assets/mdbootstrap/js/popper.min.js", "src/assets/mdbootstrap/js/bootstrap.min.js", "src/assets/mdbootstrap/js/mdb.min.js" ] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "AtomicWolf:build" }, "configurations": { "production": { "browserTarget": "AtomicWolf:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "AtomicWolf:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "/node_modules/" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "AtomicWolf:serve" }, "configurations": { "production": { "devServerTarget": "AtomicWolf:serve:production" } } } } }}, "defaultProject": "AtomicWolf" }


Arkadiusz Idzikowski staff answered 4 years ago


The error is caused by the bootstrap import in the app.module file. This is not an Angular module and it shouldn't be added to the import list.

The mega menu styles don't work because this is a pro component and in angular.json you import only MDB free styles. Use this import:

"node_modules/mdbootstrap-pro/css/mdb.min.css"

instead of:

"src/assets/mdbootstrap/css/mdb.min.css"

Mike Lupo premium commented 4 years ago

Still not working for me I tried your solution, as well as replacing all my css / js calls with -pro. Also removed the bootstrap from the app module imports. { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "AtomicWolf": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/AtomicWolf", "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": [ "src/styles.css", "node_modules/mdbootstrap-pro/css/bootstrap.min.css", "node_modules/mdbootstrap-pro/css/mdb.min.css", "node_modules/mdbootstrap-pro/css/style.css" ], "scripts": [ "node_modules/mdbootstrap-pro/js/jquery.min.js", "node_modules/mdbootstrap-pro/js/popper.min.js", "node_modules/mdbootstrap-pro/js/bootstrap.min.js", "node_modules/mdbootstrap-pro/js/mdb.min.js" ] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "AtomicWolf:build" }, "configurations": { "production": { "browserTarget": "AtomicWolf:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "AtomicWolf:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "/node_modules/" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "AtomicWolf:serve" }, "configurations": { "production": { "devServerTarget": "AtomicWolf:serve:production" } } } } }}, "defaultProject": "AtomicWolf" }


Arkadiusz Idzikowski staff commented 4 years ago

Please paste here the content of your app.module as well. What exactly doesn't work after those modifications?


Mike Lupo premium commented 4 years ago

after the modifications you suggested, nothing changed. my mega menu still looks like the original screenshot i sent you at the top of this thread.

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { TopNavComponent } from './top-nav/top-nav.component';

@NgModule({ declarations: [ AppComponent, TopNavComponent ], imports: [ BrowserModule, AppRoutingModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }


Arkadiusz Idzikowski staff commented 4 years ago

Please try to remove your node_modules folder and package-lock.json file, run npm install command again and check if the mdbootstrap-pro folder is added correctly to the node_modules. I double-checked that on my end and everything worked correctly, maybe there is a problem with dependencies.


Mike Lupo premium commented 4 years ago

That worked! thank you so much!



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: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No