Hello,
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:
https://www.anoox.com/my/share_tzt.php?i=137080
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.
Thanks,
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. 
I would suggest that you use these CSS amendments…
textarea {
max-width: 36em;
resize: vertical;
}
…to avoid any conflict with the emoji image. 
coothead
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.
Thanks.
Worked OK for me, when I tested with Firefox…
I popped the CSS - ( without the unnecessary padding-right: 50px; ) -
into line #186 of the document. 
coothead
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:
https://www.anoox.com/my/share_tzt.php?i=137207
FYI:
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 , 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.
coothead
Hi Coot,
Sorry for delay in replying to this thread as another dozen jobs came up.
Anyway, so I implemented your suggestion above and it is not producing the desired effect at all
as you can see here with the test version of a related page:
https://www.anoox.com/my/share_test.php?i=136950
with your CSS code added to style inline
and here is the actual live version of that page:
https://www.anoox.com/my/share.php?i=136950
without your CSS changes
Thanks
Hi there WorldNews,
try this…
.text_area_holder textarea {
width: 92%;
padding: 1em; /* adjust value to suit */
box-sizing: border-box;
resize: vertical;
}
coothead
Hello Coot,
Again, sorry for delay in replying. This is what you get doing 20 peoples Job working at a non-profit 
Anyway, I have implemented your last suggestion above, and it is not working again as you can see here:
https://www.anoox.com/my/share_test.php?i=136892
As you see the emoji icon holder rather than being on the right edge of the Textarea is not there at all anymore. Also with this code of yours the text area is getting vertical scroll bars as you type beyond 1 line. Note: I added position: relative; to your CSS and the emogi holder that is absolute to it still not even displaying still!
In case here is the live page where the emoji icon is seating on the right edge of Text area:
https://www.anoox.com/my/share.php?i=136892
but again of course the problem is that the text is not wrapping as it gets to right edge where padding-right is like 50px.
Thanks.
Hi there WorldNews,
can you test your links as they are not working for me. 
coothead
Hi there WorldNews,
your link suddenly worked and I was able to find the solution to your problem.
Instead of using the exact code that I posted…
.text_area_holder textarea {
width: 92%;
padding: 1em; /* adjust value to suit */
box-sizing: border-box;
resize: vertical;
}
…you used this…
.text_area_holder_test textarea {
position: relative;
width: 92%;
padding: 1em; /* adjust value to suit */
box-sizing: border-box;
resize: vertical;
}
Remove the unwanted _test and you’re ready to go.
coothead
Coot,
It does not work. As you can see here:
https://www.anoox.com/my/share_test.php?i=136844
Where the right edge of the Text areas is now like 200 px away from the emogi icon holder rather than the emoji icon holder being on that right edge, as it is in live version here:
https://www.anoox.com/my/share.php?i=136844
Thanks
Did you want the man with the sunglasses inside the textarea?
You have too many magic numbers going on there with some in percentage and some in pixels which makes it hit and miss as to what will work. That section really needs the html and css revising so that it is a more solid structure rather than guesswork.
However I’m assuming that a proper revision is not possible at this stage so all we can do is throw some more fixes at it
Assuming also that you want the man inside the text area I would add these fixes after all the original code and then see if that’s what you wanted.
.msg_post_area, .rep_post_area{
width:auto;
margin-right:7rem;
}
.text_area_holder{width:100%;}
.text_area_holder .q_area{
width:100%;
padding-right:1.7em;
box-sizing:border-box;
}
.reply_post_butn,
.msg_post_butn{
right:auto;
left:103%;
}
.emo_val{right:1.3em;top:.3em;}
They are not perfect but you don;t have the right structure for perfection.
With that code in place the page should look like this.
Assuming of course that’s what you were intending.
Paul,
Sorry for the late late replying. Been doing 30 peoples Job 
That is what you get working for a non-profit search engine & social network, work and more work
Anyway, what we wanted was to wrap the text inside the text-box say 20 pixels from end of the Text-box, it seems this is not possible. So we have just moved the icon holding the emoji with glasses OnMouseOver of which you see emojis you can choose, to the top corner of the text-area and that is a pretty good result. Not exactly what we were looking for originally, but gets the job done.
thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
