Menu
Having looked into Make JQuery UI Dialog automatically grow or shrink to fit its contents, I am using the height: "auto" option when building a jQuery modal dialog box:
$( "#dialog-message" ).dialog({
autoOpen: false,
width: "400",
height: "auto",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
However, the height isn't "growing" to fit all of the contents. I'm still seeing a vertical scrollbar as in this image:
Is there a way right in the definition code I listed to ensure that the height grows enough so that a vertical scrollbar doesn't show? Or, do I need to do this programmatically before opening the dialog box?
Edit 1
Not sure why, but Chrome is displaying this fine but IE 8 isn't. I need it to specifically work in IE 8 so I believe I'm just going to put a bottom margin on the text.
514
This all I have done for the dialog box to grow automatically
$("#edit_dependent").dialog({
autoOpen:false,
modal:true,
width:800,
position:["center",20],
minHeight:"auto"
});
That is very strange... I'm not sure how helpful this will be, but I did manage to get the auto-height to work with the following code:
<html>
<head>
<link href="jqueryUI/css/ui-lightness/jquery-ui-1.8.19.custom.css"
rel="stylesheet" type="text/css">
<script src="jquery-1.7.1.js"></script>
<script src="jqueryUI/js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
width: "400",
height: "auto",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
$("#dialog").dialog('open');
});
</script>
</head>
<body>
<div id="dialog">
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />
</div>
</body>
</html>
It's basically using the same structure you've already established.
36
This is 4 years Late but i have the same problem.
Wrote code that fixed it
Put a unique class on your dialog:
dialogClass:"someClassName"
$(".someClassName").resize(function () {
var totalHeight = 0;
var children = $(".someClassName").children(); //get all divs inside the dialog
for (var i = 0; i < children.length; i++) {
if ($(children[i]).innerWidth() > 15) {
var childrenHeight = children[i].scrollHeight;
totalHeight += childrenHeight;//make sure your dialog will be the correct height
}
}
$("#idOfContentWithWrongHeight").innerHeight($("#idOfContentWithWrongHeight")[0].scrollHeight);//put the content at the height it should appear
$(".someClassName").height(totalHeight);//update the height of the dialog
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
