Reputation: 3811
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"});
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'});
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%'});
This is probably really simple but I can't seem to find the right option...
Upvotes: 5
Views: 2350
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
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