dynamic height for iframe

[kathylParticipant]

I read an earlier post about making the height of a jqxwindow adjust depending on the content loaded. I am using an iframe, and the technique below works except for the first time I click the cell to open the window. In that case, the jqxwindow loads, but the height is tiny and no content is shown. Is this a function of the iframe?

This is my linkrender code for a cell in a jqxgrid:

	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' onClick='viewfile()'>" + value + "</div>";
	}	

And here is the jqxwindow code:
`var viewfile = function(event) {
var row = $(‘#scanDataGrid’).jqxGrid(‘getselectedrowindex’);
var value = $(“#scanDataGrid”).jqxGrid(‘getcellvalue’, row, ‘scanFile’);
$(“#jqxwindow”).jqxWindow(‘setContent’, ‘<iframe class=”iframe-class” src=”files/’ + value + ‘”></iframe>’);
$(“#jqxwindow”).jqxWindow({
theme: ‘mobile’,
width: 300,
height: ‘auto’,
showCloseButton: true,
isModal: true,
autoOpen: false,
resizable: true,
draggable: true,
});

$(“#jqxwindow”).jqxWindow(‘open’);`

Any reason why the height should not be dynamically set the first time the cell is clicked and the jqxwindow opened?

[DimitarParticipant]

Hello kathyl,

You have not given your iframe any specific dimensions. If you set its height, the window’s height should be automatically adjusted to it.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kathylParticipant]

Unfortunately, even if I add a width to my iframe, it does not calculate the height correctly:

$("#jqxwindow").jqxWindow('setContent', '<iframe class="iframe-class" width="200" src="files/' + value + '"></iframe>');

In addition, the first time I click the link to load the jqxwindow, there is no content,and the window it very, very small. If I close the window and click the cell again, the window is opened with the correct content, but it still does not calculate the height correctly.

Incidentally, my iframe-class is set as follows:

.iframe-class {
	background-color: blue;
}

[DimitarParticipant]

Hi kathyl,

In my previous post I suggested setting the iframe’s height, not its width (“If you set its height, the window’s height should be automatically adjusted to it.”)

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kathylParticipant]

My mistake. I may not be conveying well what I am trying to do. I am trying to make the height adjust dynamically, so I won’t know what height to set the window to. Each file could be a very different size and there could be hundreds of files. Another way to say it is that I am trying to dynamically calculate the height of the div of the jqxwindow.

[kathylParticipant]

Also, do you see any reason why the first time I click on the link in a cell to open my jqxwindow, the window opens, but there is no data loaded? The window is also very, very tiny.

[DimitarParticipant]

Hi kathyl,

If you need a window with auto height, its content element (i.e. the iframe) needs to have its own height set. That is how height: auto works in CSS. In your scenario, you would have to calculate the height of the document in the iframe and pass it to the iframe itself. The following Stack Overflow topic seems to have a solution for that: http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[hemadriParticipant]

Hello,

Somehow its not working for me. when I resize window frame remain on its position.Here is my code..

<style>
.container {
width: 100%;
height: 100%;
margin:0px;
padding:0px;
display:none;
}
.iframe-class {
width: 100%;
height: 100%;
margin:0px;
padding:0px;
border:0px;
}
.jqx-window-content {
padding:0px;
overflow:hidden;
}
</style>

function _createWindow(header,url) {
$(‘#jqxwindow’).jqxWindow({
maxHeight: ‘100%’,
maxWidth: ‘100%’,
minHeight: 600,
minWidth: 600,
height: 600,
width: 600,
showCollapseButton: true,
draggable : true,
resizable:true,

});
//Setting the new content
$(‘#jqxwindow’).jqxWindow(‘setContent’,'<iframe class=”iframe-class” src=”‘ + url + ‘”></iframe>’);
//'<iframe src=”‘ + url + ‘” width=”100%” height=”100%”></iframe>’);
//update header
$(‘#header’).html(header);
//show window
$(‘#jqxwindow’).show();
};

<body>
<div id=’jqxwindow’>
<div>

<span id=’header’></span>
<!– <input style=”float: right;” type=”button” value=”Ok” id=”max”> –>
</div>
<div>Content</div>
</div>

[DimitarParticipant]

Hello hemadri,

I have provided you with a working example in your forum topic on the matter: http://www.jqwidgets.com/community/topic/iframe-donot-resize-with-wondow-resize/. Please abstain from writing similar posts in different forum topics.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts