Dialog resizes after drag event

Dialog resizes after drag event

I'm using jQuery 1.3.2 and jQuery UI 1.7.2.

I create a dialog box with the following:

  1. // build the modal dialog
  2. var modalContent = $('#modal-content');
  3. modalContent.dialog({ modal: true, width: 740, height:550 })
  4. // navigate to the titlebar
  5. .parent().children('.ui-dialog-titlebar')
  6. // set its info to the modal header's
  7. .html('').append(modalContent.children('.ssModalHeader'))
  8. // navigate to the close link
  9. .find('.modal-popup-close')
  10. // bind to its click event
  11. .click(function () { modalContent.dialog('close'); return false; });

Most of that is probably irrelevant. Mainly what I'm seeing is that when I call this code, it creates the dialog and displays it. Everything looks fine. If I inspect with Firebug, I see that the height of the dialog (outermost container) is 'auto'.  However, when I drag the dialog and then drop it again, the height of the dialog suddenly gets set to the 550px height that I set it to above on line 3. Perhaps this would not normally be perceivable, but it seems like whatever logic initially sizes the inner contents -- that logic doesn't take into account the border width of the dialog.  I have a 6px border going around the entire dialog.

Now, this may be my fault. I have tweaked the theme's CSS file a bit. I didn't use the theme roller to do it. The original theme had a 1px border defined for 'ui-widget-content'. I updated it to a 6px border. I'm wondering if that 1px is hard-coded in the customized javascript somewhere as well and is causing the problem. Or is this a bug?

Thanks for any insight!