I have a textarea that I want to enable vertical scrolling. When I exceed the height of the textarea, it increases in size. The scroll bar does not appear. I want that a vertical scroll bar appears and the users are not able to resize the text area as well.
I searched online and tried solutions posted, but none seem to work.
Demo: http://jsfiddle.net/hozefa/8fv6e/
CSS:
#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;
}
HTML:
<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;"></textarea>
<a id="imageURLId" target="_blank">Go to
HomePage</a>
Simply, change
<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;"></textarea>
to
<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;" data-role="none"></textarea>
ie, add:
data-role="none"
Maybe a fixed height
and overflow-y: scroll;
Here's your CSS
element{
width: 200px;
height: 300px;
overflow-y: auto;
}
Try this: http://jsfiddle.net/8fv6e/8/
It is another version of the answers.
HTML:
<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
style="max-height:100px;min-height:100px; resize: none"></textarea>
<a id="imageURLId" target="_blank">Go to
HomePage</a>
CSS:
#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;
}
Source: Stackoverflow.com