If you open a dialog when a dialog is already displayed then, by default,

Question

0

Asked: May 27, 20262026-05-27T08:07:39+00:00 2026-05-27T08:07:39+00:00

If you open a dialog when a dialog is already displayed then, by default,

0

If you open a dialog when a dialog is already displayed then, by default, the second dialog will not expand past the width of the first dialog. This is true even though the second dialog is not actually enclosed within the first dialog (I get the second dialog by clicking a link in the first dialog).

I can set an explicit width on the second dialog, but this isn’t ideal. I really want it to auto-size to its contents (the quasipartikel multiselect), which are wider than the first/background dialog. With an explicit width on the second dialog I generally get two sets of scroll bars: one on the dialog itself, and on on the inner multiselect.

Note that I’ve only tried sizing the second dialog using an explicit width in the JS .dialog() call, and not via css (which I know almost nothing about).

Does anyone have any idea how to auto-size the second dialog? Thanks.

EDIT

Some code added as suggested:

<div id="dialog-top" title="Tab data">
  <form>
    ...lots of stuff, including id 'addCodeButton', which
    ...pops up the second dialog
  </form>
</div> <!-- dialog-top -->

<div id="dialog-add-code" title="Code selector">
  <select id = "codes" ...etc... > 
    ...
  </select>
</div>

$(function(){
   $('#addCodeButton').click(function(){
      // problem: this 'open' will not set the width of the new dialog
      // wider than 'dialog-top' unless an explicit width is given
      // (see '460' below)
      $('#dialog-add-code').dialog('open');
      return false;
    });
});

var $dialog = $("#dialog-top").dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    ...
  }
});

$('#dialog-add-code').dialog({
  autoOpen: false,
  width: 460,
  modal: false,
  buttons: {
    ...
  }
});