Can't hide Quill toolbar

sxnejr

Hi,
I'm using Quill to show a rtf input area. However, I'd like to completely remove the toolbar, but the part of code that is supposed to do that is not working:

label: 'Descrizione Breve IT:',
name: 'descrizioni.desc_breve_it',
type: 'quill',
opts: {
    modules: {
        toolbar: []
    },
    theme: 'snow'
}

and neither this:

label: 'Descrizione Breve IT:',
name: 'descrizioni.desc_breve_it',
type: 'quill',
toolbar: false

Everything they do is mess up the cell with many empty select items:
This

becomes this when editing:

The same happens in editor form.
I'm using the latest Quill version (quill@2.0.2).

kthorngren

I haven't tried it but according to this SO thread use toolbar: false. Something like this:

opts: {
    modules: {
        toolbar: false
    },
    theme: 'snow'
}

Kevin

allan

You might need to modify the plugin to remove the default toolbar there. I've also just sent you a PM with an updated version of the integration which might help.

Apologies, I need to dash at the moment, but if you are still having problems, let me know and I'll take a look next week.

Allan

sxnejr

Thank you all for your time!

Unfortunately I can't get this to work, neither by setting opts in datatables constructor or editing the plugin code by emptying defaultToolbar variable or by setting toolbar: false.
The toolbar is stuck there and the minimum change I can get is the messed up one you see on the second screenshot.

kthorngren

Try adding display: none; to this CSS:

div.quill-wrapper div.toolbar {
  display: none;
  border-bottom: 1px solid #ccc;
}

Kevin

allan

Do:

            {
                label: 'Office:',
                name: 'office',
                type: 'quill',
                className: 'full block',
                opts: {
                    modules: {
                        toolbar: []
                    },
                },
                toolbarHtml: ' '
            },

Note that toolbarHtml needs to be a single space, not an empty string. You'll also want some CSS as Kevin suggests:

div.ql-toolbar {
  display: none;
}

Allan

sxnejr

Thank you very much!
I managed to get this to work by setting both toolbarHtml to a single space (I was wrongly setting that to an empty string) and by setting this CSS:

div.ql-toolbar {
    display: none;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border: 1px solid #000 !important;
}