Javascript – Jquery dialog height and vertical scrollbar

cssdialogjavascriptjquery

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

Best Answer

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

Related Topic