tmpearce tmpearce - 7 months ago 65
CSS Question

How can I prevent a textarea resize handle from showing through higher z-index div?

I'd like to have a hidden

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
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
! (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?


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

   position: absolute;
   clip:rect(0,189px, 50px, 0);