2

I'd like to have a hidden <textarea> element on my page to handle user input while displaying it in a custom way. I thought I'd be able to do this by giving it a lower z-index than the element I'm hiding it behind (yes, the element is positioned too) . Indeed, the textarea is hidden appropriately. However... when enough text is entered to necessitate a scrollbar, the resize handle (grip) icon shows up on top of the masking <div>! (At least, on chrome.)

enter image description hereenter image description here

Here's a jsfiddle to play around with.

How can I stop this from happening? The handle doesn't actually allow resizing, so it seems very odd it would pop to the top depending on content length.

Additionally, is there a more canonical way of hiding a text input field?

tmpearce
  • 12,523
  • 4
  • 42
  • 60
  • 2
    Why not just remove the resize handle all together? I believe it is `resize: none`. I don't see it in Chrome or Firefox – putvande May 15 '14 at 08:20
  • Maybe I'm blind but I don't see the handle appear. Tested fiddle in FF and Chrome – Mark Miller May 15 '14 at 08:22
  • See this one. It will helpful to you http://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea – chandu May 15 '14 at 08:26
  • As I commented on @RamRaider's answer, `resize:none` causes a scrollbar to flash through the masking divs each time a new line is needed in the textarea (either through hitting enter or just text wrapping) – tmpearce May 15 '14 at 08:28

2 Answers2

4

This should disable the resize handle entirely - but using clip() you could hide the scrollbar

<style>
 textarea{ 
   position: absolute;
   left:10px;
   top:10px;
   z-index:-1;
   resize:none;
   width:200px;
   height:50px;
   clip:rect(0,189px, 50px, 0);
 }
</style>
Professor Abronsius
  • 33,063
  • 5
  • 32
  • 46
  • Rather than using a div to hide a portion of the textarea, could you not use clip? textarea{ position: absolute; left:10px; top:10px; z-index:-1; resize:none; width:200px; height:50px; clip:rect(0,189px, 50px, 0); } – Professor Abronsius May 15 '14 at 08:35
  • I'll also point out that by solving the problem with clipping, it is no longer necessary to set the `z-index` or `resize:none`, and no extra div is needed to hide it behind. – tmpearce May 15 '14 at 09:20
  • 1
    Is this just a bug that hasn't been fixed in a few years or is it behaving as expected? I have this issue as well but the clip isn't going to work as easily because my textarea is sized dynamically. Seems funny that this same problem exists a couple years later when it seems to be a clear bug (although maybe it is operating as expected for some reason I don't understand). – WillyC Oct 25 '16 at 16:22
2

for those who arrived here looking for a way to hide the resize icon, use:

textarea {
    resize: none;
}
JeanAlesi
  • 478
  • 3
  • 17