Question

When setting a content div’s height during a jQuery dialog ‘dialogresize’ event, the div’s height is unchanged.

See example: http://jsfiddle.net

With

<div id='myDialog'>
   <p>some text</p>
   <div id='resizeToParent' style='overflow: scroll'>
        <div style="background: #ffc; width: 100px; height: 200px;"></div>
   </div>
<div>

I want the ‘resizeToParent’ div to take up 100% of the remaining available space inside the dialog. To do this; I bind a function to the dialogresize (and as a side-effect display the height of the div and the parent inside the innermost div) and set the div’s height.

 $('#myDialog').bind("dialogresize", function (event, ui) {
 $('#myDialog #resizeToParent')
      .css('height', $('#myDialog').css('height') - 200);

However, the ‘resizeToParent’ div’s height does not change!! What am I doing wrong?

Answer 1

Check this fiddle: http://jsfiddle.net/S3FQv/

Solution: Use .height() instead of .css('height') for reading in the parent’s computed height.