Question 244040 in Html Question posted in
Some basic documentation can be found here.

Html – how to enable the scroll bar in the text area when using pointer-events: none

scrollbar is disabled when I used the pointer-events: none css in the text area.

I want the scroll bar to be enalbed to scroll and view whole content but the textarea shouldn’t be editable.
I want to fix this issue only in the css.

I tried many solution but nothing helped me

here i’ve kept my code in the jsfiddle https://jsfiddle.net/a9vxurqo/

kindly help me in this

I tired this solution but didn’t helped me https://codesandbox.io/s/scrollarea-wider-forked-sz9qnf?file=/src/App.js

Tags:

2

Answers


  1. 0

    You can do this in HTML by adding the readonly attribute to the textarea, like this:

    <textarea rows="4" class="input" readonly>
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
</textarea>

    I don’t see a way to do this with CSS.

    Login or Signup to reply.
  2. 0

    Firstly, why don’t you use readonly attribute to a <textarea> element as this attribute alone effectively create the expected situation (non-editable textarea but users can scroll through the contents).

    However, since you specifically asked for workaround using CSS only, both resize: none; and pointer-events: none; together prevent editing and resizing while enabling scrolling.

    The following worked for me:

    .input {
  resize: none;
  pointer-events: none; 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search