CODEWITHSUNDEEP
cssflexboxquillangular-flex-layoutngx-quill
Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3021

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

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).

stackblitz

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

Upvotes: 1

Views: 8926

Answers (4)

Prasun Das
Prasun Das

Reputation: 111

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

Upvotes: 1

GoForth
GoForth

Reputation: 656

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

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

Upvotes: 1

Martin Goncharov
Martin Goncharov

Reputation: 130

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

Upvotes: 6

Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3021

solution was to override height in ql-container class -

.ql-container {
  height: auto;
}

github link

Upvotes: 1

Related Questions