jQuery Dialog Width Modification

Simple fix for simple problem.

I’ve recently ran into an issue where I needed different jQuery dialogs to have different widths other then the default. The issue was that different browsers had problems with solutions that used autoResize, width: auto, etc…

Since the div’s that I needed to create dialogs from already had width CSS attributes, I used the following:

First, create a “wrapper” function for your dialog creation in jQuery:

		var divId = $(this)[0].id;
                //Check if dialog already exists, and if so just open it
                //This solves the can't open same dialog twice issue.
		if($("#" + divId).is(':data(dialog)')){
			$("#" + divId).dialog("open");
	        $("#" + divId).dialog({
	            draggable : false,
	            resizable : true,
	            close : function(e){
	            ,autoOpen : false,
	            width: $("#" + divId).css("width"),
	            describedBy : "dialogDescription",
	            modal : true});
			$("#" + divId).dialog("open").find(":input").eq(0).focus();

Now you can basically just do $(“#divId”).dialogFunction();

If you look at line 16, that will create your dialog with the css width attribute attached to the div you’re creating the modal for.


Leave a Reply

Your email address will not be published. Required fields are marked *