We help IT Professionals succeed at work.

Jquery UI Dialog AutoResize Not Working?

WorknHardr
WorknHardr asked
on
1,988 Views
Last Modified: 2014-12-10
I want to resize the Dialog height based on it's content loaded. Currently, it loads fine, just not resizing. What am I doing incorrectly?

<style>
       .ui-dialog-titlebar { 
           display:none;
       }
        .ui-dialog{
          position:fixed;
        }      
    </style>

 <div id="_MyDialog"></div>

function function2(unitId) 
{
        InitializeDialog($("#_MyDialog"), unitId);
        $("#_MyDialog").dialog("open");
    }

function InitializeDialog($element, id) 
{
            $element.dialog({
                open: function (event, ui) {
                    $element.load("/Reader/GetResults/" + id);
                },
                autoOpen: false,
                autoResize: true,
                width: 350,
                height: 'auto',
                minHeight: 450,
                position: { my: 'top', at: 'top+50', of: window, position: 'fixed' },
                resizable: false,
                draggable: false,
                title: "",
                model: false,
                show: "show",
                hide: "hide",               
                closeOnEscape: true,               
                close: function () {
                    $(this).dialog('close');
                }
            });
        }

Open in new window

Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
You are using a few properties that do not exist for the dialog element, however I can't reproduce your issue.

When you view this demo, is that what you want? (click the show button)

http://jsbin.com/kaqizu/1/quiet
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
I modified your code so that you initialise the dialog once but function2 loads the content each time.

$(function() {
	InitializeDialog($("#_MyDialog"));
});

function function2(unitId) 
{
    
	//$("#_MyDialog").load("/Reader/GetResults/" + unitId);
	// for testing
	
	$.ajax({
		url: "http://jsbin.com/xazumu/1/quiet",
		success: function(data) {
			$("#_MyDialog").text(encodeURIComponent(data));
			console.log($("#_MyDialog").innerHeight());
			$("#_MyDialog").dialog("open");
		}
	});

}

function InitializeDialog($element) 
{
	$element.dialog({
		autoOpen: false,
		autoResize: true, // DOESN'T EXIST
		width: 350,
		height: 'auto',
		//minHeight: 450,
		position: { my: 'top', at: 'top+50', of: window, position: 'fixed' },
		resizable: false,
		draggable: false,
		title: "",
		modal: false, // not model but modal
		show: true, // changed to boolean to animate
		hide: true, // changed to boolean to animate
		closeOnEscape: true,               
		close: function () {
			$(this).dialog('close');
		}
	});
}

Open in new window

Author

Commented:
leakim971:  ajaxSetup is interesting fix
Rob Jurd: yup that's the idea

Yes, I have some crazy params and misspellings. I will try these ideas tomorrow, thanks for a quick reply:)

Author

Commented:
Okay, neither example works for me.
I'm using  jquery-1.10.2.js / jquery-ui-1.11.1.js

Q. What version Jquery / Jquery-ui are you both using?
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
any
could you provide a link to your websiteor a test page somehere?

Author

Commented:
Have you tried returning a _partialView.cshtml like this:
         using $("#_MyDialog").html(data));

I'm returning a _partialView.cshtml with this .load:
$element.load("/Reader/GetResults/" + id);
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Oh yea, I'm using the same code I posted for this question (no typos), which I've used numerous times loading partial views.  Strange indeed...

Author

Commented:
I split the points because after solving this problem with the partialView, both code examples now work.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.