Limit widget size on jQuery UI dialog box?

The widget of the JQuery UI Dialog dialog box with a lot of text in it is too large, the dialog does not fit in the window (the user must scroll the browser window, user interface: "this is an error"):

$("#div_dialog").dialog({title: "Header"});

http://jsfiddle.net/w92TY/83/

Setting the height parameter to "auto" does not help, the dialog still does not fit in the window:

$("#div_dialog").dialog({title: "Header", width: 'auto', height: 'auto'});

http://jsfiddle.net/w92TY/84/

Setting the initial size to a fixed value will work ...

$("#div_dialog").dialog({title: "Header", width: 100, height: 100});

http://jsfiddle.net/w92TY/85/ ... but that is not what I want.
The widget should simply increase in size if necessary (based on the content), but not outgrow the window.

, - ('90% ' , ):

$("#div_dialog").dialog({title: "Header", maxHeight: '90%'});

http://jsfiddle.net/w92TY/87/

, , , ...

+4
2

$(window).height() * 0.9, 90% , ( /).

.. , maxHeight , (height: auto), max-height css, , maxHeight

$("#div_dialog").dialog({
    title: "Header", 
    maxHeight:$(window).height() * 0.9,
    open:function(event, ui){
        $(this).css("max-height", $(window).height() * 0.9);
    }
});
+2

height auto, .

height maxHeight , :

$(function () {
    $("#div_dialog").dialog({
        title: "Header",
        height: $(window).height() * .2,
        maxHeight: $(window).height() * .2
    });
});

: maxHeight: http://jsfiddle.net/IrvinDominin/kNHu9/

0

Source: https://habr.com/ru/post/1534661/


All Articles