How may increase the editor content area size, or an old problem of textarea ?

[be-next-hotdog]

Hello, As title, any solutions help us increase/decrease the editor content size as manipulate a textarea ? Be grateful for any tips :)

[balalamba]

min-height: 200px; to an element with class="quill-editor" ?

[anrgct]

i resolve this

.ql-container{
  min-height: inherit;
}

<quill-editor style="min-height:300px;" v-model="content" ref="textEditor" :options="editorOption"></quill-editor>

[leejaycoke]

@anrgct Thanks it works!!

[enbermudas]

Setting the height of the editor while being inside a vuetify v-card causes a weird aspect:

https://i.ibb.co/5FGPsh0/Captura-de-pantalla-de-2020-04-22-17-21-28.png

Is there a way to fix it?

[amacado]

In addition to the anwer by @anrgct I recommend to apply min-height: inherit; to the .ql-editor as well. I had the problem when min-height was only added to ql-container I could only click the first line of the textarea, below the first line the input field was inresponsive. My improvement looks like this:

.ql-container, .ql-editor {
  min-height: inherit;
}

[DragonFlameStrike]

I used vue2-editor which set min-height: 200px by default. What helped me was overriding the CSS style this way -

<style lang="css">
    @import "~vue2-editor/dist/vue2-editor.css";
    .ql-editor {
        min-height: 50px !important;
    }
</style>