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.
Best Answer
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.