Unable to set the height for ngx-quill editor using angular flex layout

Question

Unable to set the height for ngx-quill editor using angular flex layout.

The height of the editor (grey border) is overflowing the parent div (background in red).

How to make sure the editor stays inside the parent div?

`[styles]="{minHeight: '250px'}"` the simplest way. – Khan Mar 26 '20 at 13:29 — Khan, Mar 26 '20 at 13:29

score 6 · Answer 1 · answered Nov 21 '19 at 13:20

SOLUTION: All the solutions online wont work for some reason. Says something about 'unsafely set styles' and they do not even apply.

This solution overrides quill text area in Angular (You can choose any CSS file, I just prefer all my Quill editors to be the same size)

src/styles.scss

.ql-container {
     height: 300px !important;
 }

score 2 · Answer 2 · answered Sep 02 '20 at 18:38

2

Using the latest quill and ngx-quill, and assuming you're OK using ::ng-deep, this works:

::ng-deep .ql-editor {
    height: 300px;
}

answered Sep 02 '20 at 18:38

GoForth

573
7
10

Or override with global scss since ng-deep is meh. This article can help: https://betterprogramming.pub/best-way-to-overwrite-angular-materials-styles-e38dc8b84962 – usersina Jul 29 '21 at 12:30
Yes, I agree. It is quite meh. Honestly though, I'm also quite meh about global scss as well haha! – GoForth Jul 30 '21 at 06:27

score 1 · Answer 3 · answered Mar 08 '19 at 16:18

1

solution was to override height in ql-container class -

.ql-container {
  height: auto;
}

github link

answered Mar 08 '19 at 16:18

Nithin Kumar Biliya

2,763
3
34
54

score 0 · Answer 4 · edited Feb 04 '22 at 06:25

0

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

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%;
}

edited Feb 04 '22 at 06:25

Peter Csala

17,736
16
35
75

answered Feb 03 '22 at 19:51

Prasun Das

41
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 04 '22 at 06:25

Unable to set the height for ngx-quill editor using angular flex layout

4 Answers4