Jhipster css messed up

[srinisubra]

Hi moifort, As seen below the view is messed up after applying jhipster-bootstrap-material-design

Console output: ? Do you want to install Bootstrap Material design? Yes Composing JHipster configuration with module bootstrap-material-design Reading the JHipster project configuration for your module

Unable to find src/main/webapp/assets/styles/main.css or missing required jhipster-needle. Style not added to JHipster app.

I'm all done. Running npm install & bower install for you to install the required dependencies. If this fails, try running the command yourself.

npm WARN update-linked node_modules/generator-jhipster needs updating to 2.27.0 from 2.27.0 but we can't, as it's a symlink rsidapp@0.0.0 /home/vagrant/git/rsidapp └── bootstrap-material-design@0.5.8 extraneous

npm WARN optional Skipping failed optional dependency /chokidar/fsevents: npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.8 bower bootstrap#3.3.6 cached git://github.com/twbs/bootstrap.git#3.3.6 bower bootstrap#3.3.6 validate 3.3.6 against git://github.com/twbs/bootstrap.git#3.3.6 bower arrive#2.3.0 cached git://github.com/uzairfarooq/arrive.git#2.3.0 bower arrive#2.3.0 validate 2.3.0 against git://github.com/uzairfarooq/arrive.git#2.3.0 bower bootstrap-material-design#0.5.6 cached git://github.com/FezVrasta/bootstrap-material-design.git#0.5.6 bower bootstrap-material-design#0.5.6 validate 0.5.6 against git://github.com/FezVrasta/bootstrap-material-design.git#0.5.6 bower bootstrap-sass#~3.3.6 cached git://github.com/twbs/bootstrap-sass.git#3.3.6 bower bootstrap-sass#~3.3.6 validate 3.3.6 against git://github.com/twbs/bootstrap-sass.git#~3.3.6

Unable to find a suitable version for bootstrap-sass, please choose one: 1) bootstrap-sass#3.3.5 which resolved to 3.3.5 and is required by rsidapp 2) bootstrap-sass#~3.3.6 which resolved to 3.3.6 and is required by bootstrap-material-design#0.5.6

Prefix the choice with ! to persist it to bower.json

? Answer !1 bower bootstrap-sass resolution Saved bootstrap-sass#3.3.5 as resolution bower bootstrap-material-design#0.5.6 install bootstrap-material-design#0.5.6 bower arrive#2.3.0 install arrive#2.3.0 bower bootstrap#3.3.6 install bootstrap#3.3.6

bootstrap-material-design#0.5.6 src/main/webapp/bower_components/bootstrap-material-design ├── bootstrap#3.3.6 ├── bootstrap-sass#3.3.5 └── jquery#2.1.4

arrive#2.3.0 src/main/webapp/bower_components/arrive

bootstrap#3.3.6 src/main/webapp/bower_components/bootstrap └── jquery#2.1.4 Running "ngconstant:dev" (ngconstant) task Creating module rsidappApp at src/main/webapp/scripts/app/app.constants.js...OK

Running "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Done, without errors.

Execution Time (2016-02-24 13:45:23 UTC) loading tasks 5ms ▇▇▇▇▇ 2% ngconstant:dev 15ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 7% wiredep:app 146ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 67% wiredep:test 50ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 23% Total 217ms

[nDija]

Hy,

Same issue for me...

[Mateoc]

Hi I have the same issue. I look into it a bit and I think it may have something to do with that I'm using sass, so I guess you would have to use addMainSCSSStyle instead of addMainCSSStyle if that is the case.

[moifort]

@Mateoc thanks you for the solution! I will fix it!

@srinisubra, @nDija really sorry for the delay, it's quite a difficult for me in this time.

[walllzzz]

Hello, I have the same issue, any solution ?

[moifort]

Sorry I just come back from my trip, I will start working on it next week!

[walllzzz]

Hey, is there any update on the issue ?

[walllzzz]

I really can't find a solution for this issue, can you really help me ?

[moifort]

hey @walllzzz,

Sorry for the delay! First I need to update the module. Which version of Jhipster you use?

[walllzzz]

I am using jhipster 2.27.0

[atomfrede]

The problem is, that when using scss the standard bootstrap styles are injected after material design css, such that many styles are overtwritten by bootstrap.

[atomfrede]

I think we need to document this problem with sass as we can't fix it. The solution is as follows:

After applying the module on a plain jhipster application to will have this in your index.html:

<!-- build:css content/css/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css">
<link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/ripples.css">
<!-- endinject -->
<link rel="stylesheet" href="content/css/vendor.css">
<!-- endbuild -->

As vendor.css contains the bootstrap css all modifications done by bootstrap-material design are overwritten. Therefore you should change the part to this:

<!-- build:css content/css/vendor.css -->
<link rel="stylesheet" href="content/css/vendor.css">
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css">
<link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/ripples.css">
<!-- endinject -->
<!-- endbuild -->

Now everything is fine! When using css you won't have that issue as the bootstrap dependencies will be inject before material design css.