Enable Vertical Scrolling on Textarea

Add a scrollbar to a textarea

What you need is overflow-y: scroll;

Demo

    textarea {        overflow-y: scroll;        height: 100px;        resize: none; /* Remove this if you want the user to resize the textarea */    }
<textarea></textarea>

Enable vertical scrolling on textarea

You can try adding:

#aboutDescription
{
height: 100px;
max-height: 100px;
}

Vertical scrollbar in a disabled textarea

Try it like this:

.clsTextArea {
height: 100px;
max-height: 100px;
overflow-y: scroll;
}

Showing vertical scrollbar always in a textarea field

Although it is not recommended, you can use padding. That way you'll always have a place to scroll to.

textarea {
height: 0px;
overflow-y:scroll;
padding-bottom: 200px; /*your height*/
}

The text will now always have padding at the bottom though, so you'll be able to scroll past the text content.

Remove scrollbars from textarea

Try the following, not sure which will work for all browsers or the browser you are working with, but it would be best to try all:

<textarea style="overflow:auto"></textarea>

Or

<textarea style="overflow:hidden"></textarea>

...As suggested above

You can also try adding this, I never used it before, just saw it posted on a site today:

<textarea style="resize:none"></textarea>

This last option would remove the ability to resize the textarea. You can find more information on the CSS resize property here

Vaadin: TextArea scrolling doesn't work

You can change it CSS also like below .

.v-textarea { overflow-y: auto ! important;}

Disable scroll on textarea

Just add in the css file:

textarea {
resize: none;
}

or:

<textarea rows="10" cols="45" placeholder="Animatie:" name="description" style="resize: none"></textarea>

Fiddle: https://jsfiddle.net/p6am6dze/2/

Issue with Text area scroll bar?

Set a fixed height for textarea and then add data-autogrow="false" to prevent it from auto-growing.

  • CSS

    textarea {
    height: 150px; /* any value you want */
    }
  • HTML

    <textarea data-autogrow="false">

    <!-- text -->

    </textarea>

Demo



Related Topics



Leave a reply



Submit