Question

I have 2 textboxes and 1 textarea.The textarea initially shows limited data and on focus it shows an expanded textarea. during expansion the other textboxes are also moved down. Why cant i expand only the textarea?
This is my jquery code:

$('.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});

$('.expand').blur(function () {
$(this).animate({ height: "1em" }, 500);
});

Answer 1

The position of other textareas is relative to the one you are trying to resize. You could create an absolutely positioned overlay div that is positioned on top of the active textarea, then you could resize the overlaying textarea without affecting other textareas.

Edit: created a sample jsfiddle that shows a possible solution: http://jsfiddle.net/vgqC8/
You should be able to do it if you set the position of the textarea to absolute, but beware that it is relative to the closest parent that is positioned relatively.