CODEWITHSUNDEEP
jquery-uidialogjquery-ui-dialog
EML
EML

Reputation: 10280

jQueryUI: sizing a dialog within a dialog?

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: {
    ...
  }
});

Upvotes: 0

Views: 79

Answers (1)

BZink
BZink

Reputation: 7967

I'm not sure what's causing your problem. Here's fiddle demonstrating that what you want does work.

http://jsfiddle.net/brettzink/NASyR/

you tried .dialog({width:"auto"}); ?

Upvotes: 1

Related Questions