Css not applying correctly


Topic: Css not applying correctly

Mike Lupo pro premium asked 8 months 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 8 months 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 pro premium commented 8 months 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 8 months ago

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


Mike Lupo pro premium commented 8 months ago

I did that. Same issue as above


Krzysztof Wilk staff commented 8 months 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 pro premium commented 8 months 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 8 months 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 pro premium commented 8 months 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 8 months ago

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


Mike Lupo pro premium commented 8 months 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 8 months 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 pro premium commented 8 months ago

That worked! thank you so much!


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.19.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No