Menu
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.
566
$(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() { } });
The jQuery UI dialog method is used to create a basic dialog window which is positioned into the viewport and protected from page content. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
Below is how I achieved a responsive jQuery UI Dialog. To do this, I added a new option to the config - fluid: true , which says to make the dialog responsive. I then catch the resize and dialog open events, to change the max-width of the dialog on the fly, and reposition the dialog.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
