Reputation: 3021
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?
Upvotes: 1
Views: 8926
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
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
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
Reputation: 3021
solution was to override height
in ql-container
class -
.ql-container {
height: auto;
}
Upvotes: 1