Make JQuery UI Dialog automatically grow or shrink to fit its contents

Question

I have a JQuery UI dialog popup that displays a form   By selecting certain options on the form new options will appear in the form causing it to grow taller   This can lead to a scenario where the main page has a scrollbar and the JQuery UI dialog has a scrollbar   This two-scrollbar scenario is unsightly and confusing for the user   How can I make the JQuery UI dialog grow  and possibly shrink  to always fit its contents without showing a scrollbar   I would prefer that only a scrollbar on the main page is visible

User · Answer

I used the following property which works fine for me       selector   dialog        minHeight   auto

User · Answer

var w       dialogText   text   length       dialog   dialog  option    width    w   10      did what i needed it to do for resizing the width of the dialog

User · Answer

Height is supported to auto   Width is not   To do some sort of auto get the size of the div you are showing and then set the window with   In the C  code    TheDiv Style  width      200px        private void setWindowSize int width  int height                string widthScript           dialogDiv   dialog  option    width            width                  string heightScript          dialogDiv   dialog  option    height           height                   ScriptManager RegisterStartupScript this Page  this GetType                 scriptDOWINDOWSIZE                 lt script type  text javascript  gt                 widthScript               heightScript                 lt  script gt    false

User · Answer

The answer is to set the   autoResize true    property when creating the dialog   In order for this to work you cannot set any height for the dialog   So if you set a fixed height in pixels for the dialog in its creator method or via any style the autoResize property will not work

User · Answer

This works with jQuery UI v1 10 3     selector   dialog  height  auto   width  auto

User · Answer

Update  As of jQuery UI 1 8  the working solution  as mentioned in the second comment  is to use   width   auto      Use the autoResize true option  I ll illustrate      lt div id  whatup  gt       lt div id  inside  gt Hi there  lt  div gt     lt  div gt      lt script gt           whatup   dialog         resize    auto                   whatup   dialog         setTimeout function                 inside   append  Hello  lt br gt             setTimeout arguments callee  1000            1000       lt  script gt    Here s a working example  http   jsbin com ubowa

User · Answer

If you need it to work in IE7  you can t use the undocumented  buggy  and unsupported   width   auto   option  Instead  add the following to your  dialog      open   function      this  dialog  option    width   this scrollWidth      Whether  scrollWidth includes the right-side padding depends on the browser  Firefox differs from Chrome   so you can either add a subjective  good enough  number of pixels to  scrollWidth  or replace it with your own width-calculation function   You might want to include width  0 among your  dialog   options  since this method will never decrease the width  only increase it   Tested to work in IE7  IE8  IE9  IE10  IE11  Firefox 30  Chrome 35  and Opera 22

[jquery] Make JQuery UI Dialog automatically grow or shrink to fit its contents

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-dialog