Positioning oversized jQuery.UI dialog WAY off

Question

I have a dashboard screen filled with dialogs arranged in three columns. It works pretty well.

var leftContent;
var middleContent;
var rightContent;
var verticalOffset;

$(document).ready(function() {
    leftContent = $('#columnTop');
    middleContent = $('#columnTop');
    rightContent = $('#columnTop');
    verticalOffset = (jQuery.browser.safari) ? 40 : 5;

    includeJavascriptFile('inlineForumFunctions.js');

    $('.dialog').each(function(){
        var p = '';
        if ($(this).hasClass('dialogLeft')) p = 'posLeft';
        if ($(this).hasClass('dialogCenter')) p = 'posCenter';
        if ($(this).hasClass('dialogRight')) p = 'posRight';

        $(this).dialog({
            title: $(this).attr('title'),
            maxHeight: 400
        }).parent().attr('id', $(this).attr('id') + 'Dialog')
        .addClass('cfDialog').addClass(p);
    });

    $('.cfDialog').css('width', '30%');

    $('.cfDialog.posLeft').each(function(){
        addToLeftColumn($(this).attr('id'));
    });

    $('.cfDialog.posCenter').each(function(){
        addToCenterColumn($(this).attr('id'));
    });

    $('.cfDialog.posRight').each(function(){
        addToRightColumn($(this).attr('id'));
    });

    $('.menu ul').hover(function(){
        $(this).maxZIndex();
        $(this).children().maxZIndex();
    });

});

$.maxZIndex = $.fn.maxZIndex = function(opt) {
    /// <summary>
    /// Returns the max zOrder in the document (no parameter)
    /// Sets max zOrder by passing a non-zero number
    /// which gets added to the highest zOrder.
    /// </summary>
    /// <param name="opt" type="object">
    /// inc: increment value,
    /// group: selector for zIndex elements to find max for
    /// </param>
    /// <returns type="jQuery" />
    var def = {
        inc: 10,
        group: "*"
    };
    $.extend(def, opt);
    var zmax = 0;
    $(def.group).each(function() {
        var cur = parseInt($(this).css('z-index'));
        zmax = cur > zmax ? cur : zmax;
    });
    if (!this.jquery)
        return zmax;

    return this.each(function() {
        zmax += def.inc;
        $(this).css("z-index", zmax);
    });
}

function addToLeftColumn(elementId){
        $('#'+elementId)
        .position({
            my: 'left top',
            at: 'left bottom',
            of: leftContent,
            offset: '0 ' + verticalOffset
        });
    if ($('#'+elementId).html().length > 0){
        leftContent = $('#'+elementId);
    }
}

function addToCenterColumn (elementId){
        $('#'+elementId)
        .position({
            my: 'center top',
            at: 'center bottom',
            of: middleContent,
            offset: '0 ' + verticalOffset
        });
        alert(middleContent.attr('id'));
        middleContent = $('#'+elementId);

}

function addToRightColumn (elementId){
        $('#'+elementId)
        .position({
            my: 'right top',
            at: 'right bottom',
            of: rightContent,
            offset: '0 ' + verticalOffset
        });
    if ($('#'+elementId).html().length > 0){
        rightContent = $('#'+elementId);
    }
}

...however, the maxHeight property seems to be ignored. I have one dialog box that is much larger than 400 pixels tall, and when the screen renders, the very bottom edge of the dialog is seen at the top of the screen.

Why is this happening?

Answer 1

You want to set the height property, otherwise it's auto. The maxHeight property is used for dialogs that are resizable by the user.