How to prevent textarea content from overflowing into padding?

Question

I have added padding to a textarea element. After typing more than four lines of content, however, the content overflows into the padding. Is there any way to prevent the content from overflowing into the padding?

I have referenced prevent expand to textarea and How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only) but neither solutions seem to resolve my problem.

body {
    background: grey;
}
textarea {
    width: 100%;
    margin: 0;
    padding-top: 1em;
    resize: none;
}

<body>
    <textarea name="" id="" cols="30" rows="4"></textarea>
</body>

As i'm testing this, going past the 4th line just keeps dropping the text down and lets me scroll back up to the top. I don't see anything overflowing. Do you have other code in here that could be causing it? — Brandon, Aug 17 '21 at 14:59
Thanks for the prompt response! I have used only the above code to produce my problem. I have edited the question to include a picture of the problem. I am currently operating on Safari 14.0.1, but this problem seems to occur with Chrome as well. — , Aug 17 '21 at 15:06
Sorry, i must not be following what the issue is. I did it on chrome too. I even added your snippet here. If I'm just typing 4 different lines, by the time the 5th line hits, it just drops the text down. But again after scrolling back to the top, your padding is still there. — Brandon, Aug 17 '21 at 15:26
I may have phrased the question incorrectly. When the content hits the fifth line, the first line shifts into the padding. All subsequent new lines will cause five lines to be simultaneously displayed. How do I only display the four lines within the content box and prevent the first line from shifting into the padding? — , Aug 17 '21 at 15:52

score 0 · Accepted Answer · answered Aug 17 '21 at 17:08

0

I could not find a way of doing it with padding but the same sort of effect can be achieved by setting the top border of the textarea instead of the padding:

body {
    background: grey;
}
textarea {
    width: 100%;
    margin: 0;
    border-top-width: 1em;
    border-top-color: white;
    resize: none;
}

<body>
    <textarea name="" id="" cols="30" rows="4"></textarea>
</body>

answered Aug 17 '21 at 17:08

A Haworth

30,908
4
11
14

Thank you so much. Do you happen to know why textarea produces the results in the question? – Aug 17 '21 at 19:31
1

I don't I'm afraid. In a way it's like background which oozes into the padding, but it's totally unlike a 'normal' div with text in it. – A Haworth Aug 17 '21 at 19:55

How to prevent textarea content from overflowing into padding?

1 Answers1