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.
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?
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:
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:
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:
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.
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.