HTML Textarea Horizontal Scroll

HTML Textarea horizontal scroll

To set no wrapping, you would use:

white-space: nowrap;

For other values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

NOTE: However the depreciated wrap="off" seems to be the only way for legacy browser support. Though it isn't HTML 5 compliant, it's still my preference if you're targeting all browsers.

how to scroll text area horizontally?

Add the below lines to your CSS:

white-space: nowrap; /* will prevent the default wrapping of text to next line */
overflow-x: auto; /* will make horizontal scroll-bar appear only when needed */

Demo Fiddle

How to make textarea content scroll horizontally on overflow in the same fashion as input? (without jumps )

This is easily achieved by using the white-space css attribute:

white-space: nowrap;
overflow-x: hidden; /* don't add this if you want a scrollbar to appear */

Make text inside textarea not break to next line

You can do this by applying the css - white-space: nowrap rule.

textarea {
  white-space: nowrap;
}

<textarea></textarea>

Horizontal textarea scrollbar can't be grabbed in Chrome when border-radius is applied

• OPTION 1:

I have faced the exact same problem before and I have come up with a solution which is not the most professional one, but does the job for me.

First of all, wrap your textarea inside a div and set for your div the following properties:

div {
    border: 1px solid rgb(169,169,169);  /* The default color for the textearea's border */
    border-radius: 4px;                /* The border-radius you had on the text area */
    overflow: hidden;                /* To prevent the textarea's edges from overflowing */
    display: inline-block;       /* To ensure the div's border wraps around the textarea */
}

Then, remove the border from the textarea and set vertical-align: top to get rid of that sort of padding-bottom that exists in elements with display: inline-block. Like so:

textarea {
    vertical-align: top; /* To remove the small gap that exists in inline-block elements */
    border: 0;    /* To remove the border from the textarea */
}

As I said at the beginning, I don't consider this a very professional approach and alternative to this bug, but the result is visually identical to the textarea in your fiddle. However, use it with caution as it's likely that it may behave unexpectedly in some situations.

Working fiddle: → here.

Snippet:

div {

  border: 1px solid rgb(169, 169, 169);

  border-radius: 4px;

  overflow: none;

  display: inline-block;

}

textarea {

  vertical-align: top;

  overflow-x: visible;

  border: 0;

}

<div>

  <textarea wrap="off" rows="5">HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal ScrollaaabHTML Textarea Horizontal ScrollaaabHTML Textarea Horizontal ScrollaaabHTML Textarea Horizontal Scrollaaab

    HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal Scrollaaa

    HTML Textarea Horizontal Scrollaaab

    IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX.

  </textarea>

</div>

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>

Making two textareas horizontally scroll in sync

To make a simple scrolling motion which will be equal on both scroll bars depending on the lower one. You will have to convert the values of the scroll bars to percentage values. For this to work there has to be some scrollable content in the lower text area.

Here is an update to the function which implements percentage values

function select_scroll(e) {
    let percent = bodybox.scrollLeft / (bodybox.scrollWidth - bodybox.clientWidth);
    headbox.scrollLeft =  (headbox.scrollWidth - headbox.clientWidth)* percent;
}

---

Related Topics