jQuery UI Widgets Forums Dialogs and Notifications Window dynamic height for iframe

This topic contains 8 replies, has 3 voices, and was last updated by  Dimitar 5 years, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • dynamic height for iframe #74239

    kathyl
    Participant

    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?

    dynamic height for iframe #74256

    Dimitar
    Participant

    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/

    dynamic height for iframe #74281

    kathyl
    Participant

    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;
    }
    • This reply was modified 5 years, 9 months ago by  kathyl.
    dynamic height for iframe #74293

    Dimitar
    Participant

    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/

    dynamic height for iframe #74334

    kathyl
    Participant

    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.

    dynamic height for iframe #74335

    kathyl
    Participant

    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.

    dynamic height for iframe #74347

    Dimitar
    Participant

    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/

    dynamic height for iframe #74925

    hemadri
    Participant

    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>

    • This reply was modified 5 years, 9 months ago by  hemadri.
    dynamic height for iframe #74954

    Dimitar
    Participant

    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/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.