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

Html – The ability to resize a textarea goes away when the text exceeds the textarea height and the scrollbar width is set to 0

This took me a while to fix, and was frustrating.

With this in the css:

*::-webkit-scrollbar {
    width: 0;
}

When a textarea’s content exceeds it’s height it is no longer resizable as it appears that the resize widget then forms part of the hidden scroll bar.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    To continue with the general zero widht scrollbar, I overrode the css for textareas by adding:

    textarea::-webkit-scrollbar {
    width: 1rem;
}

  2. 0

    Here is a solution to allow resizing of textarea without showing the scrollbar:

            textarea {
            width: 100%;
            height: 100px;
            resize: both; /* Allow resizing */
            overflow: hidden; /* Hide scrollbar */
            box-sizing: border-box;
        }

        /* Hide the scrollbar */
        textarea::-webkit-scrollbar {
            display: none;
        }
     <textarea placeholder="Type here..."></textarea>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search