Jquery Auto expand Parent div when child div height is changed

Question

What is the easiest way to make the parent #container div automatically adjust height when the inner #child contenteditable div exceeds the height of the parent div.

Here's the example. http://jsfiddle.net/ULUJX/ Try to type inside the #child div until height exceeds the parent div.

Answer 1

I'd track keyup events and watch the height of #child, for example:

var $child = $('#child');

var $container       = $('#container');
var container_height = $container.height();
$container.resizable();

$child.keyup(function() {
    var h = $child.height();
    if(h > container_height) {
        $container.height(h);
        container_height = h;
    }
});

Here's an updated version of your jsfiddle: http://jsfiddle.net/ambiguous/ULUJX/10/

If you want it to shrink as well then simply change the if and take care with the initial sizes of things.

Answer 2

i was testing out this and it works good

(function heightFix($){
    var parentCon = $('#container'),
        child = $('#child').height();
    if(parentCon.height() < child){
       parentCon.height(child)
    }
    setTimeout(function(){
        heightFix($);
    },100)
}(jQuery));

you can change the speed to update the height faster but if your going to use it in a editable box it would be better to use a event trigger like

$('#child').live('keypress', function(){
    var parentCon = $('#container'),
        child = $(this).height();
    if(parentCon.height() < child){
       parentCon.height(child)
    }
});