I am returning data via ajax to populate a jquery dialog. The ajax is basically an html table with a variable amount of rows.
I'd like the dialog to expand to show the rows, up to a certain vertical size (350px), at which point it should show a vertical scrollbar.
So, this seems to work fine - the dialog resizes correctly depending on the number of rows. But, I never get the vertical scrollbar - so if I have 20 rows, then I only get to see the last 9.
How do I force the vertical scrollbar if the height would have been more than 350px?
$.ajax({
type: 'POST',
url: 'myurl',
data: postdata,
dataType: 'json',
success: function (result) {
if (result.success && result.data) {
var $dialog = $('<div></div>').html(result.data).dialog({
autoOpen: false,
title: 'History',
modal: true,
height: Math.min((result.rows * 25) + 150, 350),
width: 800
});
$dialog.dialog('open');
}
event.preventDefault();
}
});
5 Answers
You should add css property overflow:auto for content div.
$("<div></div>").css({height:"350px", overflow:"auto"});
If you need ONLY vertical scroll overflow-y:auto and overflow-x:hidden
use css max-height: 350px; and overflow:auto; .. should be fine
I know this is kind of old but none of these worked for me. Here is what is working as of jQuery UI 1.10.
$("#helptext").dialog({
title: 'Blog Help',
autoOpen: false,
width: '90%',
height: ($(window).height() - 200),
modal: true
});
Adjust Height and width as you like. I have allot of text in my dialog and didn't want to scroll the whole page.
I didn't want to give a fixed px height so I found a solution giving the model the following css rules.
.modal {
display: inline-block !important;
max-height: 90%;
overflow: auto;/* Or scroll, depending on your needs*/}
I hope it works for you.
For me worked:
.jconfirm-holder {
overflow-y: auto;
}
