4

Inside of my textarea, I wish to maintain a padding of 30px from the top.

textarea {
    display: block;
    width: 300px;
    height: 50px;
    padding-top: 30px;
}

However, once the text-area is filled with text and the content starts scrolling. The padding is no longer maintained.

http://jsfiddle.net/w47wbq77/

When you run this fiddle, initially you'll notice that the padding from top (inside of the textarea) is maintained. However, the minute you have more than 150 characters, the padding is gone.

Any solution to this ?

Bubble Trouble
  • 579
  • 1
  • 8
  • 16
  • 3
    The padding is still there, it's just scrolled out of the view because of the text length. Do you want to keep the 30px high white block always visible? – Zoltan Toth Mar 06 '17 at 17:34

3 Answers3

10

I would remove all styling from the text area, and wrap it in a div that looks like a text area

.wrapper { 
  border: 1px solid #aaa; 
  padding-top: 30px; 
}

textarea { padding: 0 }

You might have to fiddle about with border radius etc, but that would maybe do it

stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
5

It looks like for the textarea element the padding is added, but the text is still visible in the padding zone. I haven't really found a good solution so I came up with a workaround using a combination of border and outline to mimic the padding inside the textarea:

textarea {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
    outline: 1px solid #dadcde;
}

The top and bottom transparent borders are the actual padding. They add extra space between between the text and the textarea.

The left and right transparent borders prevent border artifacts left due to how the borders are calculated and drawn in the browsers.

The outline is the actual visible border of the textarea and replaces the border property.

Here's a jsFiddle example to show how it works

Shahar
  • 2,269
  • 1
  • 27
  • 34
  • Instead of an outline, you can use a `box-shadow: 0 0 0 1px #666;` to recreate the border. See: https://stackoverflow.com/a/72808802/8702126 – Purple_Kitten Jun 30 '22 at 14:48
0

I think the correct it's usage a "margin", but for you request can be: http://jsfiddle.net/Lhderpup/

.padTextarea {
  background-color: white;
  padding-top: 30px;
  display: table;
  border: 1px solid #CCC;
}

Adding a new DIV. More about, Margin, Padding, etc: Difference between margin and padding?

I hope I have helped.

Community
  • 1
  • 1
Andre Rodrigues
  • 253
  • 3
  • 6