CODEWITHSUNDEEP
jqueryjquery-ui
Draco
Draco

Reputation: 16364

How to resize width of a Jquery dialog after initialization

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>

Upvotes: 21

Views: 52111

Answers (7)

Fumisky Wells
Fumisky Wells

Reputation: 1199

This works for me. The point is to resize after open it:

$('#dialogContainer').
    dialog('open').
    dialog('option', 'width',   'auto').
    dialog('option', 'height',  'auto');

jQuery version in my case is 1.11:

> Query.fn.jquery
> "1.11.1"

Upvotes: 1

biniam
biniam

Reputation: 8199

Initialize the dialog with the width option specified: The width of the dialog is in pixels.

$( "#dialogBox" ).dialog({ width: 500 });

Get or set the width option, after initialization:

// getter
var width = $( "#dialogBox" ).dialog( "option", "width" );

// setter
$( "#dialogBox" ).dialog( "option", "width", 500 );

Source: http://api.jqueryui.com/dialog/

Upvotes: 7

Khandad Niazi
Khandad Niazi

Reputation: 2396

HERE IS SHORT SOLUTION, But remember it is only for predefined dialog. 

$( "#dialog" ).dialog({minHeight: 300,minWidth:500});

Upvotes: 3

Dave
Dave

Reputation: 7359

$("#dialogweb").dialog({width:'90%'});

Upvotes: -1

dllhell
dllhell

Reputation: 2014

$("#dialogID").css("width", 160);

Upvotes: 2

Josh
Josh

Reputation: 5331

Try this:

$("#dialogID").data("width.dialog", 160);

Upvotes: 2

kgiannakakis
kgiannakakis

Reputation: 104168

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

Upvotes: 9

Related Questions