How to give a Textarea padding?


How do we add padding to a Textarea?
It is not working when as you can see we have:

.stretch_new textarea {
    resize: none;
    overflow: hidden;
    min-height: 25px;
    max-height: 100px;
	padding-right: 50px;

but as you can see here:
the padding is not working as the text being typed goes under the emoji image
rather than fold at 50px from the right of the textarea.


Hi there WorldNews,

if you had examined the "textarea element " on that page
with a little more care, then you would have discovered
that the emoji image was not within that element. :wonky:

I would suggest that you use these CSS amendments…

textarea {
    max-width:  36em;
    resize: vertical;

…to avoid any conflict with the emoji image. :winky:


1 Like

Hi Coot,

1st, yes I know that the emoji image is not within that Textarea element, because Position: relative does not work on Textarea element. So had to fake position the emoji image there by wrapping the Textarea element in a DIV that has position: relative and then absolute position it within there.

2nd, your suggestion does not work as the text being typed still goes under the emogi image and does not wrap at padding: 50px for the Textarea element.


Worked OK for me, when I tested with Firefox…

annox.html (36.1 KB)

I popped the CSS - ( without the unnecessary padding-right: 50px; ) -
into line #186 of the document. :biggrin:


Hi Coot,

I specifically added the CSS style adds that you provided, which are these:

max-width:  36em;
resize: vertical;

and it is not working as you can see here:

1- tzt is the test version of this page live
2 we did make some changes to the page in this regard so it is little better
3- the padding-right does work just fine in case of INPUT type=text

and how is the CSS you provided supposed to address this issue anyway?
or put another way, using your CSS if we wanted the text inside the Textarea to wrap at 200px from the right edge of the Textarea, how would we do that?

Hi there WorldNews,

on your new page :biggrin:, the appropriate CSS would be…

.text_area_holder textarea {
      max-width: 36em;
      resize: vertical;

Setting a maximum width to the textarea prevents it from encroaching
upon the space occupied by the emoji image.