jqueryui dialog relative to other dialog

Question

I want to position two dialogs next to each other. I do the following:

$("#deck").dialog({
  width: 'auto',
  height: 'auto',
  position: {
    my: 'left top',
    at: 'left bottom',
    of: '#title',
  }
});

$("#seats").dialog({
  width: 'auto',
  height: 'auto',
  position: {
    my: 'left top',
    at: 'right top',
    of: '#deck',
  },
});

However, this positions #seats to the right top of the #deck div, not the #deck dialog, so the two dialogs are not aligned because of the title bar difference. How would I position #seats relative to the #deck 's actual dialog? I've tried using an of of #deck :parent , #deck :parent :parent , and passing in the return value of $("#deck").dialog(...) but neither gave the desired result. I'd rather not hard-code the height of the title bar.

Answer 1

The following works perfectly:

$("#seats").dialog({
  width: 'auto',
  height: 'auto',
  position: {
    my: 'left top',
    at: 'right top',
    of: $('#deck').parent(),
  },
});