JQueryUI Dialog Size

jquery jquery-ui jquery-ui-dialog

102,266

Solution 1

Question: Why does setting the width and height when the dialog is defined not affect the initial size of the dialog?

Answer: It does... what browser are you using and version of jQuery.

I cut/pasted your code from above into a small sample and it worked perfectly... I pasted the full sample below you can try it on your end.

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css"      rel="stylesheet" />  
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js">     </script>
        <script type="text/javascript">
        $(document).ready(function () {
            $(function() {
            $("#dialog-form").dialog({
                autoOpen: false,
                    maxWidth:600,
                    maxHeight: 500,
                    width: 600,
                    height: 500,
                    modal: true,
                    buttons: {
                    "Create": function() {
                    $(this).dialog("close");
                    },
                    Cancel: function() {
                    $(this).dialog("close");
                    }
                },
                    close: function() {
                }
                });
            });

            $("#create-appt")
            .button()
            .click(function() {
                $("#dialog-form").dialog("open");
            });
        });
        </script>

    </head>
        <body>
    <h1>test</h1>
    <div id="dialog-form" title="Create Appointment">   
        <p> this is my test </p>
    </div>
    <input type="button" id="create-appt" value="test"/>
    </body>
 </html>

Solution 2

I don't know exactly what it's happening, but you can change a little bit your code and it'll produce the result you expect:

Instead of use autoOpen you can set these options on the onclick event:

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog({width: 600,height:500});
    });

I hope this helps best regards, Marcelo Vismari

102,266

JasonFruit

I work mostly with an open-source stack, Python, PostgreSQL, and the like. I think I'm becoming a language gourmand; in the last few years, I've learned plenty of JavaScript, Scheme, Lua, and Emacs Lisp, and enough Common Lisp, Go, and Object Pascal to be dangerous. I'm doing far more web work than I used to, and that's okay, I guess, though I miss desktop applications. Oddly, I find myself being much more productive using Python with CherryPy and Cheetah Templates than I have ever managed to be using a more complete web framework like Django.

Updated on February 13, 2020

Comments

JasonFruit about 4 years

I'm new to JQueryUI, and though I have a dialog working, it doesn't open at the size I think I'm specifying. Why does setting the width and height when the dialog is defined not affect the initial size of the dialog? How do I make it 600px by 500 px?

Here is the div that defines the dialog:

<div id="dialog-form" title="Create Appointment">   
  <form> . . . </form>
</div>

Here is the JavaScript that makes a dialog of it:

$(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        maxWidth:600,
        maxHeight: 500,
        width: 600,
        height: 500,
        modal: true,
        buttons: {
            "Create": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
        }
    });

And the JavaScript that defines the button to open it:

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog("open");
    });
});

Edit:

I see the problem now: this would have worked fine, except I was running it in Google Chrome using the --app=... command-line option, so it was not reloading the whole application.

JasonFruit about 13 years

I tried it that way earlier, and it did the same thing; see my latest edit for the reason.
JasonFruit about 13 years

Just so: it was working. See my edit above for the reason I couldn't see it.