CODEWITHSUNDEEP
javascriptcssflexboxquill
s1n7ax
s1n7ax

Reputation: 3069

Make QuillJS editor height 100%

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>

Upvotes: 13

Views: 36625

Answers (2)

Prasun Das
Prasun Das

Reputation: 111

The issue is height: 100% coming from the ql-container class which causes the overflow. The same issue people are facing in react-quill

Just add the following css to your code it will overwrite quill style

    .ql-container {
  min-height: 10rem;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ql-editor {
  height: 100%;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

Upvotes: 7

kukkuz
kukkuz

Reputation: 42360

The issue is height: 100% coming from the ql-container class which causes the overflow. You can try the below:

  1. Add flex: 1 to #editor-container and make it a column flexbox too.

  2. Add flex: 1 and width: 100% to #editor and for large content add overflow-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>

Upvotes: 12

Related Questions