loading external file in jqxwindow – extra space above

[kathylParticipant]

I am displaying a grid where a user clicks on one field to display a file. The file is displayed, but there is about 20px of extra space above the jqxHeader and above the file displayed.

Here is how I am calling the window:

	var linkrenderer = function (row, column, value) {
		if (value.indexOf('#') != -1) {
			value = value.substring(0, value.indexOf('#')); //value is the text
		}
		var ref = "files/";
		return "<div id='viewFile' style='text-align: center; margin-top: 5px;' onClick='viewfile()'>" + value + "</div>";
	}		

And the viewFile:

$("#jqxwindow").jqxWindow({ 
		theme: 'mobile', 
		width: 600,
		height: 400, 
		minWidth: 400,
		minHeight: 200,
		maxWidth: 1200,
		maxHeight: 900,
		title: 'Scans', 
		isModal: true, 
		showCloseButton: true,
		autoOpen: false, 
		resizable: true,
		draggable: true
	});
			
	var loadPage = function (url) {
	    $.get(url, function (data) {
	        $('#windowContent' ).text(data);
	    });
	}
			
	var viewfile = function(event) {
		var row = $('#scanDataGrid').jqxGrid('getselectedrowindex');
		var value = $("#scanDataGrid").jqxGrid('getcellvalue', row, 'scanFile');	
		loadPage('scans/'+value);
		$('#windowHeader').show();
		$('#windowContent').show();					
		$("#jqxwindow").jqxWindow('open');
	} 

The php file:

<div id="jqxwindow">
	<div id="windowHeader"></div>
	<div id="windowContent"></div>
</div>

And the css:

#windowContent {
	background-color: yellow;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

#windowHeader { background-color: red; }

I can obviously see the gaps because I’ve (temporarily) colored the backgrounds of the windowHeader and windowContent. Can you see anything I’ve done incorrect? Thanks-

[VladimirParticipant]

Hello kathyl,

I see nothing wrong with your code, and no reason for extra vertical-space in the jqxWindow in the above mentioned code and I was also unable to reproduce the issue.
What you could try is, to inspect the resulting widget with a browser’s developer tools and try to find out what style might be causing the issue and where is it coming from. It could be that you are loading some external stylesheet or attempting to set some style for the grid that would be affecting the window.
You could also try to use a test string instead of loading a real file, to exclude any issues coming from the loaded documents themselves.

If you continue to have a problem please create a jsfiddle recreating the issue.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts