I am using QuillJs. There is some unnecessary space on top of toolbar icons.

Here's what it looks like when I inspect element on my browser.

What am I doing wrong?

I've tried removing the space by altering the margins, paddings, heights, but it doesn't work.

var toolbarOptions = [
    ['bold', 'italic', 'underline'], // Basic text styles
    [{ 'list': 'ordered' }, { 'list': 'bullet' }], // Lists
    ['link'], // Allow hyperlinks
];      

var quillLongIntro = new Quill('#longIntroduction', {
    theme: 'snow',
    modules: { toolbar: toolbarOptions }
});

.ql-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--white);
    border: 1px solid var(--gray);
    border-radius: 8px;
    
}

.ql-container {
    border-radius: 8px;
    margin-top: 0;
}

.ql-toolbar{
    margin: 0px !important;
    padding-top: 0px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    min-height: 35px;
    height: auto;
}

.ql-toolbar .ql-formats {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ql-toolbar:empty{
    display:none;
}

<script src="/[email protected]/dist/quill.js"></script>
<div id="longIntroduction"></div>

I am using QuillJs. There is some unnecessary space on top of toolbar icons.

Here's what it looks like when I inspect element on my browser.

What am I doing wrong?

I've tried removing the space by altering the margins, paddings, heights, but it doesn't work.

var toolbarOptions = [
    ['bold', 'italic', 'underline'], // Basic text styles
    [{ 'list': 'ordered' }, { 'list': 'bullet' }], // Lists
    ['link'], // Allow hyperlinks
];      

var quillLongIntro = new Quill('#longIntroduction', {
    theme: 'snow',
    modules: { toolbar: toolbarOptions }
});

.ql-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--white);
    border: 1px solid var(--gray);
    border-radius: 8px;
    
}

.ql-container {
    border-radius: 8px;
    margin-top: 0;
}

.ql-toolbar{
    margin: 0px !important;
    padding-top: 0px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    min-height: 35px;
    height: auto;
}

.ql-toolbar .ql-formats {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ql-toolbar:empty{
    display:none;
}

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/quill.js"></script>
<div id="longIntroduction"></div>

• quill

• I've converted your code into a runnable snippet, however the posted code doesn't resemble your problem. Please edit the question and provide enough relevant code to create an actual minimal reproducible example. – DarkBee Commented Jan 31 at 7:22

1 Answer 1

Add the following CSS fixes to properly align toolbar items:




   /* Ensure toolbar has no extra padding/margin */
.ql-toolbar {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    min-height: 35px;
    height: auto;
}

/* Remove unwanted padding/margin from toolbar buttons */
.ql-toolbar button,
.ql-toolbar .ql-picker-label {
    margin: 0 !important;
    padding: 4px !important; /* Adjust padding */
    height: 30px !important; /* Ensure uniform height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure toolbar icons are aligned properly */
.ql-toolbar .ql-formats {
    display: flex !important;
    align-items: center !important;
    gap: 4px; /* Add spacing between buttons */
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix height issues in the editor */
.ql-container {
    border-radius: 8px;
    margin-top: 0 !important;
}

.ql-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--white);
    border: 1px solid var(--gray);
    border-radius: 8px;
    padding: 10px !important; /* Ensure consistent spacing */
}

/* Hide toolbar when it's empty */
.ql-toolbar:empty {
    display: none;
}