CODEWITHSUNDEEP
htmlcssangularquill
Hubert Kiszka
Hubert Kiszka

Reputation: 19

Quill .ql-container extends size of quill-editor

I have a weird problem in which my child div extends beyond size of parent div

<div class="editor-container">
  <quill-editor
    [(ngModel)]="editorContent"
  >
  </quill-editor>
</div>

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.editor-container {
  height: 100vh;
  width: 80%;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
}
quill-editor {
  width: 100%;
  height: 100%;
}
::ng-deep .ql-container {
  height: 100%;
}
::ng-deep .ql-editor {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
}


import { Component } from '@angular/core';
import {QuillModule} from 'ngx-quill';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'app-document',
  imports: [QuillModule, FormsModule],
  templateUrl: './document.component.html',
  styleUrl: './document.component.css'
})
export class DocumentComponent {
  editorContent: string = '';
}

No matter how i set this height and what options i add .ql-container always extends beyond the height of the screen so beyond the height of its parent divs. I expect to have this quil-editor to have always 100% height of the screen, no matter what and only thing that should be scrollable is .ql-editor/.ql-container when the text is too long and it overflows

Upvotes: 0

Views: 46

Answers (1)

Altaf Malik
Altaf Malik

Reputation: 13

You are using class editor-container which is overriding to defualt class of quil editor.

Change class name i.e

`editor-container` to `editor-wrap-container` or any

Example

.editor-wrap-container {
  height: 100vh;
  width: 80%;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
}

<div class="editor-wrap-container">
  <quill-editor
    [(ngModel)]="editorContent"
  >
  </quill-editor>
</div>

Upvotes: 0

Related Questions