Make QuillJS editor height 100%
12,900
The issue is height: 100%
coming from the ql-container
class which causes the overflow. You can try the below:
Add
flex: 1
to#editor-container
and make it a column flexbox too.Add
flex: 1
andwidth: 100%
to#editor
and for large content addoverflow-y: auto
See demo below:
var quill = new Quill('#editor', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
html,body {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#header {
height: 40px;
background: red;
}
#footer {
height: 40px;
background: red;
}
#editor-container {
height: 100%;
/* added these styles */
flex: 1;
display: flex;
flex-direction: column;
}
#editor {
height: 100%;
/* added these styles */
flex: 1;
overflow-y: auto;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
<div id="container">
<div id="header">Header</div>
<div id="editor-container">
<div id="editor">Sample</div>
</div>
<div id="footer">Footer</div>
</div>
Author by
s1n7ax
Updated on July 16, 2022Comments
-
s1n7ax almost 2 years
In the below application I want Quill editor to fill the existing space within header and footer. I tried making it 100% but that adds a scroll to the whole page. How to make Quill to fill the space at the same time to adapt screen size. (If the height is reduced editor height should be reduced)
var quill = new Quill('#editor', { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ] }, placeholder: 'Compose an epic...', theme: 'snow' // or 'bubble' });
html,body { margin: 0; height: 100%; } #container { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } #header { height: 40px; background: red; } #footer { height: 40px; background: red; } #editor-container { height: 100%; } #editor { height: 100%; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script> <div id="container"> <div id="header">Header</div> <div id="editor-container"> <div id="editor">Sample</div> </div> <div id="footer">Footer</div> </div>