resize a div after setting innerHTML with mootools

I am using mootools 1.2 in a simple page. There's a div that displays a form (call it formdiv) that gets submitted via JS/ajax. The ajax request returns some data "confirmation message".

However, the formdiv div starts out maybe 500px high to accomodate the form elements. When the ajax request ret开发者_StackOverflowurns a variable-length return data ("confirmed for submission!") the div stays 500px high, leaving a lot of extra space.

My question is, is there a way to snap the div back to fit the new content after updating the content using innerHTML?

Thanks

EDITED: to add that the data returned by the Ajax call could be variable length-- so I can't assume it'll be a certain height and then reset the div to that height.

If your div starts off with predefined height using CSS then all you should do is set its height to auto or clearing styles altogether when they were set inline.

Check this JSFiddle (it works with jQuery here, but that doesn't matter when it comes to browser rendering div in question)

Okay I realize that this is like a year late but I came across this question while attempting to find a script to do just this. This was a great starting point but I felt like I should share the method I choose to use:

1. Get the current actual height of $('element').

   h.before = $('element').getSize().y;
   

2. Fx.Morph can't handle setting the height to 'auto' so first you must set height: 'auto' on $('element') (in case it hasn't been already) and then set the html to the new content. This will allow you to get the new content's height.

   $('element').setStyle('height', 'auto');
   $('element').set('html', "Some other content.<br/>Very short.");
   h.after = $('element').getSize().y;
   

3. Reset the height and then start the Fx.Morph with h.after.

    $('element').setStyle('height', h.before);
   
    var myEffect = new Fx.Morph('element', {
        onComplete: function() {
            $('test').setStyle('height', 'auto');
        }
    });
   
    myEffect.start({'height': h.after});
   

You can check out the full code here: http://jsfiddle.net/cd4R9/

Please understand this is method is very basic and a lot would have to be done to make this site-ready. For example if your $('element') has padding, you will have to account for it or use the CSS property box-sizing: border-box;. Hope this helps.