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.

I'd suggest to post a sample of the code, it's difficult to recommend a solution without seeing the structure of the dialog. — Diego, Apr 16 '09 at 14:22

score 140 · Accepted Answer · edited Oct 13 '11 at 14:29

140

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:

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

Here's a working example: http://jsbin.com/ubowa

edited Oct 13 '11 at 14:29

Ferruccio

98,941
38
226
299

answered Apr 19 '09 at 04:47

cgp

41,026
12
101
131

Hmm.. will have to extend my [FrameDialog](http://plugins.jquery.com/project/jquery-framedialog) ... it's essentially a method that creates an iframed content for use with dialog.. it isn't perfect, but working well for a project I needed it for. – Tracker1 Apr 19 '09 at 05:44
20

This didn't work for me. Instead, I set the option "width" to "auto". – Sam Jul 02 '10 at 18:20
+1 to the comment -- it worked for me, and the example works as well, so I have to imagine this hasn't changed, but hey, if all else fails, give it a shot. – cgp Jul 02 '10 at 18:43
This doesn't work for width though, it only works for height I think. – Walt W Aug 17 '10 at 18:42
18

This answer is no longer valid for version 1.8.4 instead use height auto http://forum.jquery.com/topic/dialog-auto-width – Jeff Aug 23 '10 at 18:36
I get this error: "Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'resize'". – Hamish Grubijan Apr 10 '13 at 23:28
Error: no such method 'resize' for dialog widget instance – Олег Всильдеревьев Jun 14 '14 at 08:39
`{'width':'auto'}` does not work in IE7 and will not be fixed because the `{'width':'auto'}` option is [not supported by jQuery-UI](http://bugs.jqueryui.com/ticket/4437) according to scott.gonzalez: "Dialog's don't support auto width. The docs state that the option only accepts a number, which will be used for a pixel size. See [jquery-ui-dev thread](https://groups.google.com/forum/#!topic/jquery-ui-dev/6EicX8l7o_4) for a discussion about why we won't support auto width." – Val Kornea Jun 25 '14 at 20:18
I'm not seeing this work, only because you are adding text that does not span onto the next line. It does not resize with more content. – Brunis Oct 09 '17 at 06:51

score 48 · Answer 2 · answered Apr 16 '09 at 14:42

48

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.

answered Apr 16 '09 at 14:42

MikeN

45,039
49
151
227

9

Fantastic :) but why jQuery didn't put that at their documentation ?!. Anyway thank u . – Wahid Bitar Oct 12 '10 at 18:08
careful, does not work with positioning by trigger plugin (at, my, off etc) – Jeffz May 31 '12 at 11:40

score 29 · Answer 3 · answered Jun 05 '13 at 03:25

29

This works with jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});

answered Jun 05 '13 at 03:25

IlludiumPu36

4,196
10
61
100

Worked for me too (v1.11.1). – Jay Cummins Jul 18 '17 at 12:29

score 13 · Answer 4 · answered Nov 06 '12 at 09:13

13

I used the following property which works fine for me:

$('#selector').dialog({
     minHeight: 'auto'
});

answered Nov 06 '12 at 09:13

emolah

227
2
11

Working in jquery ui 1.12 – Nguyên Ngô Duy Nov 02 '20 at 03:48

score 2 · Answer 5 · answered Dec 07 '11 at 13:57

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",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }

Val Kornea · Answer 6 · 2014-06-25T23:38:20.270

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.

score 1 · Answer 7 · edited Jun 30 '11 at 18:27

1

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.

edited Jun 30 '11 at 18:27

Code Maverick

20,171
12
62
114

answered Jan 31 '11 at 05:35

user596393

11
1

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

7 Answers7

Linked