Question

I want to expand a textarea (increase the height) as long as it has the focus. When expanded, the textarea should not move the content down, instead it should be displayed above the other content.

This is the code I’m using so far (see here for an example):

$(document).ready(function () {
    $('#txt1').focus(function () {
        $(this).height(90).css('zIndex', 30000);
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).css('height', 'auto');
    });
});

The expanding of the textarea works fine, but I can’t get it to display above the other elements on the page (it is displayed behind the elements which follow).

Are there any tricks to show the expanded textarea above/in front of all other elements?

Update: this is the (minmal) HTML code used to reproduce the problem:

<div style="height:20px;">first:<br/>
   <textarea id="txt1" rows="1" cols="20"
     style="width: 400px; height: 12px; font-size: 10px;">
   </textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>

Answer 1

Setting position on the textarea works. You can also get rid of the z-index.

Working demo