Ngx-quill: Way to resize the textarea?

[napindc]

Is there a way to resize the body of the textarea manually? Such as the 6 triangle dots seen in the bottom right of this text area.

Some of my users may want to see a bigger textarea, and I don't want to necessarily make it a huge height for all users.

[KillerCodeMonkey]

Build something with CSS or/and JavaScript which changes the height of the
editor

On Fri, 30 Mar 2018, 15:59 napindc, [e-mail] wrote:

Is there a way to resize the body of the textarea manually? Such as the 6
triangle dots seen in the bottom right of this text area.

Some of my users may want to see a bigger textarea, and I don't want to
necessarily make it a huge height for all users.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/147, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ACKOYInl5c8mlIH21djrG64wx_LZfTXrks5tjjpSgaJpZM4TBuM1
.

[KillerCodeMonkey]

this is no default action for this on quilljs. But as i mentioned simply use js and css to those things.

maybe you can add a custom quill module for this :)
i would add a wrapper div to the editor, add something like the triangle dots and on mousemove/touchmove set width and height accordingly.

And than set the editor height and width to 100% so it fits your wrapper :)

[vibingopal]

to increase the size of the text area of the component, just update the height of the .ql-container to height: 250px !important something like that. Hope this helps

[ChuckIrvine]

@vibingopal, could you provide a little more detail on how and in which files changes need to be made? I have an Angular component with a template that includes a quill-editor element. I've tried adding the following to the component's css file:

.ql-editor {
    resize: vertical;
    overflow-y: scroll;
}

.ql-container {
    resize: vertical;
    overflow-y: scroll;
}

to that file, but it had no effect.

[KillerCodeMonkey]

Checkout the example Repo you have to Set viewencapsulation to None for the
component or add quill Styling to global Styles.

View encapsulation adds pseudo classes to you Styling to avoid effecting
Others parts of your App ;)

Am Fr., 25. Jan. 2019, 01:38 hat Chuck [e-mail]
geschrieben:

@vibingopal https://github.com/vibingopal, could you provide a little
more detail on how and in which files changes need to be made? I have an
Angular component with a template that includes a quill-editor element.
I've tried adding:

.ql-editor {
resize: vertical;
overflow-y: scroll;
}

.ql-container {
resize: vertical;
overflow-y: scroll;
}

to that file, but it had no effect.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/147#issuecomment-457412161,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYNfLFLqhBKwrAH7KziT8pxPU9-eIks5vGlIagaJpZM4TBuM1
.

[ChuckIrvine]

I see where you specify "encapsulation: ViewEncapsulation.None" in the custom-toolbar component. However, I don't see why it is needed, that is, what effect it is having. Could you explain what effect the setting is having in the component.

[KillerCodeMonkey]

Just Check the angular readme about IT ;).

Per Default angular emulates shadowdom so Styling a component does Not
effect the Styling of Others parts of the App.

E.g. in your component you have Button and you Style IT Like:

button { color: white; }

IT only effect Buttons in your component and does Not Override global
Stylings.

Angular adds pseudo classes to your component Elements and adds suffixes to
your classes ... Simply Test IT Out what Happens in the Dom when switching
encapsulation.

When you Override quill classes in your component the selectors will Not
Match quills classes, because angular adds some Magic to the classnames, so
they will Not effect the quill editor.

If you Set it viewencapsulation to None your component Styling is global
Styling ;).

Am Fr., 25. Jan. 2019, 17:38 hat Chuck [e-mail]
geschrieben:

I see where you specify "encapsulation: ViewEncapsulation.None" in the
custom-toolbar component. However, I don't see why it is needed, that is,
what effect it is having. Could you explain what effect the setting is
having in the component.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/147#issuecomment-457633990,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYLXpSERDVFzgS5QNt5WyzRcjHaqOks5vGzMFgaJpZM4TBuM1
.

[ChuckIrvine]

Ok. Got it working. In the components css file, I put:

.quill-editor .ql-container {
    resize: both;
    overflow-y: scroll;
}

where ".quill-editor" is the class of the quill-editor's parent div.

And, as suggested, in my component ts file, I put

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
...
@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-new-subject',
  templateUrl: './new-subject.component.html',
  styleUrls: ['./new-subject.component.css']
})

[predzme]

You could try with those selectors :

:host ::ng-deep .ql-editor {
  resize: vertical;
  overflow-y: scroll;
}

:host ::ng-deep .ql-container {
  resize: vertical;
  overflow-y: scroll;
}

[KillerCodeMonkey]

which is not recommended, because the ng-deep selector is deprecated ;)

[anuj509]

nothing worked for me so when I tried to put following in styles.scss it worked.
`
.ql-editor {
resize: vertical;
overflow-y: scroll;
}

.ql-container {
height: 60% !important;
}

`

Also i have put viewEncapsulation to none in component but not sure whether it holds some purpose or not :(