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

Html – Textarea right padding when using a horizontal scrollbar?

When creating a textarea with a horizontal scrollbar, how to enable a padding on the right side?
CSS padding works for the top right corner, but not for the right side:

enter image description here

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
  border: 1px solid black;
  height: 5rem;
  width: 14rem;
  padding: 0.75rem;
}
<textarea>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</textarea>
Tags:

2

Answers


  1. 0

    Interesting issue. I would use a content editable div.

    #test {
        white-space: pre;
        overflow-wrap: normal;
        overflow-x: scroll;
        border: 1px solid black;
        height: 5rem;
        width: 14rem;
        padding: 0.75rem;
    }
    <div id="test" contenteditable="plaintext-only">foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</div>
    Login or Signup to reply.
  2. 0

    This seems to be a known bug (Issue #40572939) specifically for textarea and have been staying open without any fix for a while in Chromium. As quoted in the issue:

    This is due to the layout overflow calculation not including inline-end padding for block-level children, this may be fixed if we change our behaviour here.

    For now the only solution I know all involves changing the textarea to a contenteditable similar to what @spyder1329 posted.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search