How to resize width of a Jquery dialog after initialization

Question

I'm trying to change the width of a JQuery dialog after it has been initialized. Here is my initialization:

$(function() {
$("#dialogContainer").dialog({
title: 'Some title',
resizable: false,
bgiframe: true,
overlay: { opacity: 0.3, background: "white" },
position: [200, 200],
autoOpen: false,
height: 150,
width: 'auto'
modal: true,
buttons: {
  'ok': function() {
    $(this).dialog('close');
  }
}

});

});

And this is what I am doing to change the width of it in some other function:

$("#dialogBox").dialog('option','width',700);

But this doesn't work. The width of the dialog is the width of the paragraph that's first displayed in it. Was I suppose to do anything else?

Here is the html for the dialog:

<div id = 'dialogContainer'>
  <p id = 'message'></p>
</div>

Answer 1

Make sure that you are using ui.resizable.js and ui.resizable.css