Javascript dialog auto heigth not work correctly

Question

i wrote this code in cshtml to create a container for my pdf viewer modal:

<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
        <iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
                style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>

and my js is:

function PopupPDF() {
    $('#form_modal_PDF').dialog({
        open: function () {
            $(this).closest(".ui-dialog")
            .find(".ui-button-text")
            .removeClass("ui-button-text");
        }
        , autoOpen: false
        , modal: true
        , draggable: false
        , resizable: false
        , show: 'slide'
        , hide: 'drop'
        , width: '80%'
        , height: 'auto'
        , beforeClose: function () {
            $('#form_load_PDF').attr('src', 'about:blank');
        }
    });
    $('#form_modal_PDF').dialog('open');

    $('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}

But my dialog pdf viewer in height deals only 10% of my screen

Thanks

You may want to calculate your required height with javascript, or set a default height percentage (but I think a percentage won't work for the height, unless they fixed a certain bug... or maybe it was intentional). — nonzaprej, May 04 '17 at 11:03
Not work with percentage, how can i calculate a height in javascript? — ricga, May 04 '17 at 11:05
What version of jquery-ui are you using? I'm trying with version 1.12.1 and "height: 'auto'" works. — nonzaprej, May 04 '17 at 11:20

score 0 · Answer 1 · answered May 04 '17 at 11:13

You need change iframe code like this

<iframe id="form_load_PDF" class="IframeDialog" frameborder="1" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>

nonzaprej · Answer 2 · 2017-05-04T12:12:48.903

Here's how you can calculate the height with javascript:

$(document).ready(function() {
  PopupPDF();
});

function PopupPDF() {
    $('#form_modal_PDF').dialog({
        open: function () {
            $(this).closest(".ui-dialog")
            .find(".ui-button-text")
            .removeClass("ui-button-text");
        }
        , autoOpen: false
        , modal: true
        , draggable: false
        , resizable: false
        , show: 'slide'
        , hide: 'drop'
        , width: '80%'
        , height: $('body').height() * 0.6
        , beforeClose: function () {
            $('#form_load_PDF').attr('src', 'about:blank');
        }
    });
    $('#form_modal_PDF').dialog('open');

    $('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}

html, body {
  height: 100%;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
        <iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
                style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>

It's done with $('body').height() * 0.6. Just change it to the percentage you want (and replace "body" with the actual container of the "form_modal_PDF" div).

Javascript dialog auto heigth not work correctly

2 Answers2