Ngx-quill: Imported the quill module, but css does not seem to get applied

[karthikkp]

This is how it looks for me. There are no console errors and I also tried including them in the angular-cli.json file.

[KillerCodeMonkey]

You need to import the quill theme CSS and core CS on your own. Import the
CSS Files in your CSS/scss or If you are using angular+cli add them to
Styles in the angular CLI json. Or simply load them in your index.HTML.
check my demo repo for an example

put:

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';

at the beginning of your styles.(s)css to get the quill styles globally or only in the (s)css file of a specific component

[maenthoven]

Just adding because this took me a sec to figure out, in case anyone else stumbles on this thread. For some reason, I missed that there's a difference between core.js and core.css

There are three files you need to include to get this fully working with angular-cli

In .angular-cli.json:

"styles": [
...
"../node_modules/quill/dist/quill.snow.css",
"../node_modules/quill/dist/quill.core.css"
...
],
"scripts": [
"../node_modules/quill/dist/quill.core.js"
],

[RscAnonymous]

I have imported the bubble.css but still facing the same issue.

[KillerCodeMonkey]

did you checked out my example repo? there you see how to integrate quill with an angular cli projec.t it is linked in the readme

[RscAnonymous]

yes I did. The snow theme is working fine as expected but the bubble theme is not. I'm seeing the same ui as posted by OP.

[KillerCodeMonkey]

strange because in my example it is working fine https://killercodemonkey.github.io/ngx-quill-example/ checkout the "bubble theme" editor

[KillerCodeMonkey]

Check your javascript console in the browser or cli output if there is a hint, that the bubble.css is not found.

Maybe you have missed something in the path or name.

[RscAnonymous]

It is including the bubble.css but I must be doing something wrong since its working fine in your example. Let me check and will get back to you. Thank you

[KillerCodeMonkey]

You have to include it in your global css. because if you import it only in a component all css classes are getting prefixed because of view encapsulation ;)

[RscAnonymous]

works fine now. I was overwriting some of the CSS in my styles.css (for snow theme) which was not letting the floating toolbar work when I changed the theme to bubble. Thank you.

[KillerCodeMonkey]

no probs. glad it is working now :)

[kyracalvert]

Thanks for sticking with the issue, @KillerCodeMonkey!

[Ramaq007]

dasasd

[Ramaq007]

dasasd

dasdasd