Getting A JQuery Dialog To Automatically Change Size To Fit A Message

Getting A JQuery Dialog To Automatically Change Size To Fit A Message

I am trying to use a jQuery dialog box to replace the standard confirm() as much as is possible.

I'm almost there, but I would like to reuse the code below throughout my web app and for that I need the jQuery dialog box to change its size to fit the message.

When I've tried setting height:auto or width:auto, the dialog disappears, showing only the message ( or maybe it is the dialog box taking over the whole screen ). I tried this in combination with setting maxWidth and maxHeight to no avail.

This happens if I use jQuery-1.7 or jQuery-1.8.2.

If I use jQuery-1.9.1 the dialog does not come up at all

I downloaded a freshly update verusion of my jQuery-ui theme ( "redmond" )

Thanks in advance for any tips in helping me find a way to make the dialog box automatically resize itself to fit the message ( without scrolling)



  1. <html>
        <title>Experiment JQ Confirm Dialogs</title>
        <link type   = "text/css" href = "../css/jquery-ui-1.9.1.custom.css" rel = "stylesheet" />
        <script type = "text/javascript" src = "../js/jquery-1.7.js"></script>
        <script type = "text/javascript" src = "../js/jquery-ui-1.9.1.custom.min.js"></script>
            var jqConfirmValue = false;
            function jqConfirm(msg, okLabel,cancelLabel,okCallBack,cancelCallBack){
                    resizable: false,
                    modal: true,
                    draggable: false,
                      text: okLabel,
                      click: function(){$(this).dialog("close");okCallBack();}
                    },/* end ok button*/
                      text: cancelLabel,
                      click: function(){$(this).dialog("close");cancelCallBack();}
                    }/*end cancel button*/
                    ]/*end buttons*/ 
                    });// end .dialog()
            }// end funciton jqConfirm()
            function confirmIt(){ alert("true!"); }
            function cancelIt(){ alert("false!"); }
            function test(){
                var msgConfirmZeroAndBlank = "You may not receive all emergency messages " +
                                             "if you don't provide a personal cell phone " +
                                             "number or email address.  Are you sure you " +
                                             "want to opt out?";
                jqConfirm(msgConfirmZeroAndBlank, "Yesh!", "Nay!",confirmIt,cancelIt);
    <body background = "white">
    <h1>Experiment JQuery Confirm Dialog</h1>
     <div id = "jqConfirmDialog" title = "Confirm" style = "text-align:left;font-family:Arial,Helvetica;font-size:11pt;font-weight:bold;" ></div>
     <input type = "button" value = "Click Me!" onclick = "test();"/>