UI Dialog moves when content is added to the page.

UI Dialog moves when content is added to the page.

Ever since the dialog widget started using position: relative when positioning itself, it will jump downwards if you dynamically add content the the document.

Proof of concept scenario:

You've got a table of data. To add a new row, there's an +Add button that opens up a form in a dialog. Submission of the form is all handled via javascript to dynamically add the new row to the table... When this happens, the dialog will shift down exactly the height of the new row, due to the fact that the dialog is positioned relatively to the body rather than absolutely. So far confirmed in Chrome and Firefox on both windows and OSX.

This will happen in 1.8.4 with the following arguments to the position option:

  2.   {
  3.      my: 'center center',
  4.      at: 'center center',
  5.     of: window
  6.   }

Now, I'm not 100% sure of passing the window object is supposed to be supported by .position() or not, but it seems to be, because the dialog always opens in the correct position.

Proposed solution? An option in .position() to specify the use of absolute vs. relative positioning.