Jquery dialog height and vertical scrollbar

Question

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();
    }
});

Answer 1

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

Answer 2

use css max-height: 350px; and overflow:auto; .. should be fine

Answer 3

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.