CODEWITHSUNDEEP
javascriptjquery-uijquery-ui-dialog
basic6
basic6

Reputation: 3811

Limit Size Of JQuery UI Dialog Widget?

A JQuery UI Dialog widget with lots of text in it is too big, the dialog doesn't fit in the window (user has to scroll browser window; user experience: "that's a bug"):

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

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

Setting the height option to 'auto' does not help, the dialog still doesn't 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 would work...

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

http://jsfiddle.net/w92TY/85/ ... but that's not what I want either.
The widget should just grow in size if necessary (based on contents) but not outgrow the window.

Basically I'm looking for something like this ('90%' does not work because a numeric value in pixels is expected):

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

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

This is probably really simple but I can't seem to find the right option...

Upvotes: 5

Views: 2350

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

By default the height property is auto, so the dialog will auto grow depending on its content.

You can set height and maxHeight as a percentage of the window like:

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

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

Upvotes: 0

paulitto
paulitto

Reputation: 4673

You can use $(window).height() * 0.9 to get 90% of a window, and also set max height dynamically when dialog opens (in case window was resized/rotated).

And.. looks like it does not respect maxHeight property when dialog does not have fixed height (height:auto), so you can set it via max-height css property, after you resize dialog first time it should obtain fixed height and maxHeight will work from that time

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

Upvotes: 3

Related Questions