jQuery UI dialog - dynamic div - white space issue
I've got a div that I am appending to the page dynamically on click of a link, and then writing an iframe to that div. 

	// open login popin
	function loginLayer(){
	
		
		$(".ui-dialog-content").dialog("destroy");
		
		callIframe();
		
		openLoginDialog();

	}
	
	
	// write dialog div & iframe + src to DOM
	function callIframe() {
				
		var iframeURL = "" + loginConfig.iframeSource + "?displayType=" + loginConfig.displayType +"&isSignature=" + loginConfig.isSignature + ""
		$('body').append('<div id="loginDialog"></div>');
		$('#loginDialog').append('<IFRAME id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></div>');
	}
	
	
	// open login dialog
	function openLoginDialog(){ //open }
    	} 

after `callIframe` runs, the dialog opens. 

What's happening is that the dialog opens with the iframe, no issue - but, at the bottom of the `body` (firefox and IE) is a large amount of white space that is the same size as the `#loginDialog` height. 

I'm not sure the cause, as everything appears in order - but it appears that when the div is appended to the body, that it's rendering there - increasing body height and then opening in the dialog.
jQuery UI dialog - dynamic div - white space issue
===

I've got a div that I am appending to the page dynamically on click of a link, and then writing an iframe to that div. 

	// open login popin
	function loginLayer(){
	
		
		$(".ui-dialog-content").dialog("destroy");
		
		callIframe();
		
		openLoginDialog();

	}
	
	
	// write dialog div & iframe + src to DOM
	function callIframe() {
				
		var iframeURL = "" + loginConfig.iframeSource + "?displayType=" + loginConfig.displayType +"&isSignature=" + loginConfig.isSignature + ""
		$('body').append('<div id="loginDialog"></div>');
		$('#loginDialog').append('<IFRAME id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></div>');
	}
	
	
	// open login dialog
	function openLoginDialog(){ //open }
    	} 

after `callIframe` runs, the dialog opens. 

What's happening is that the dialog opens with the iframe, no issue - but, at the bottom of the `body` (firefox and IE) is a large amount of white space that is the same size as the `#loginDialog` height. 

I'm not sure the cause, as everything appears in order - but it appears that when the div is appended to the body, that it's rendering there - increasing body height and then opening in the dialog.