Layout looks broken

[davidnash]

Hello, I'm using regular Quill in a bootstrap project, and I came across this, and would prefer to use it instead.

I did npm uninstall quill and npm install bootstrap-quill --save, and then in my SCSS have this:

// @import '~quill/dist/quill.snow.css';
@import '~bootstrap-quill/scss/quill.snow';

and in my js I did this:

var Quill = require('bootstrap-quill');
// var Quill = require('quill');

then I did npm run dev, and it looks like this:

whereas quill "classic" looks like this:

The only other code that's changed is adding a white background to the quill editor div.

Thanks for your help!

cheers, David

[klasjersevi]

I think you don't have the css configured correctly. You will need both the quill.scss and also any of or both of quill.snow.scss and quill.bubble.scss.

Note that you may also need to include the svg sprite file somewhere. See the dist folder for assets needed. See package.json for details on what needs to be built if you want to include it in your build.

See the demo/index.html for a running example.

[davidnash]

Thanks for your quick response, Klas.

I now have:

@import '~bootstrap-quill/scss/quill';
@import '~bootstrap-quill/scss/quill.snow';

And it doesn't look broken any more, but the icons aren't displaying.

The demo is working fine.

In Chrome web dev inspector, in the demo I see this:

whereas on mine I see this:

Notice that mine doesn't have anything inside the <use> element, whereas the demo has the svg.

[klasjersevi]

Great, you have to include the svg sprite somewhere in the beginning of your page. You can style it as absolute positioned and 0x0 size, to make it invisible.

[klasjersevi]

See line 23 in the demo/index.html file to use a cachable js file that takes care of all that for the svg sprite.

[davidnash]

Fantastic, thanks! It's working now.

Just a note that this doesn't match the current instructions for Quill - eg with that you need only import the theme CSS, and you don't need the sprite.svg.

I'm having other issues, but I'll close this one. Thanks again.

[klasjersevi]

Yes, it's not supposed to be exactly like current quill. But I noticed that the instructions here really needs an update to explain everything.