Quasar text area for chat input

Question

The following is the text area found in https://quasar.dev/vue-components/input#textarea

I highlighted the modification I wish to have into different color of rectangle - I wish to make it a chat input text area.

1. red rectangle - can I disable the underlying blue line?
2. green rectangle - can I disable the resizable option?
3. yellow rectangle - can I make the scroll bar smaller?

The ideal is the following

Answer 1

Good news!

You can actually achieve everything you have mentioned! If this was a life changing dream of yours, you shall call me 'GOD'!, otherwise never-mind.

1. Disabling the underlying blue line;

use the borderless property

<q-input borderless v-model="text" label="no resize arrow" type="textarea" />

2. Disabling the resize option

use the autogrow property to hide the resize arrow. However, why use a textarea when you can have just a normal text input box ? If you want to replace the textarea with a normal textbox , remove the type property

<q-input borderless autogrow v-model="text" label="no underlying border" type="textarea" />

If you want to resort to manual css to hide the resize icon, you can use the below css.

textarea {
  resize: none; /* this will disable resize for all textarea elements.  */
}

3. Making the scrollbar smaller

Make use of Quasar's scrollarea which has a very sexy looking scrollbar.

<q-scroll-area style="height: 200px; max-width: 300px;"> <!-- have you chat window here --> </q-scroll-area>

If you want to have your own custom scrollbar design; then you can follow the below snippet; but the browser support so far is limited to 'chrome'.

::-webkit-scrollbar {
  width: 10px;
}