Here's my current code:

$("#DialogScroll").dialog({
                bgiframe: true,
                autoOpen: false,
                maxHeight: 600,
                width: 550,
                modal: true,
                resizable: false,
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                },
                close: function () { }
            });

maxHeight works great in Firefox, Chrome, etc. as expected, but IE 7 obviously has a problem with it. Does anyone have any idea how to get the UI dialog to use maxHeight in IE?

<div id="DialogScroll" class="dialog" style="display:none; ">
        <table>
            <thead>
                <tr>
                    <th>
                        State Code
                    </th>
                    <th>
                        State Name
                    </th>
                </tr>
            </thead>
            <tbody>
                <asp:Literal ID="litStates" runat="server" />
            </tbody>
        </table>
    </div>

Here's my current code:

$("#DialogScroll").dialog({
                bgiframe: true,
                autoOpen: false,
                maxHeight: 600,
                width: 550,
                modal: true,
                resizable: false,
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                },
                close: function () { }
            });

maxHeight works great in Firefox, Chrome, etc. as expected, but IE 7 obviously has a problem with it. Does anyone have any idea how to get the UI dialog to use maxHeight in IE?

<div id="DialogScroll" class="dialog" style="display:none; ">
        <table>
            <thead>
                <tr>
                    <th>
                        State Code
                    </th>
                    <th>
                        State Name
                    </th>
                </tr>
            </thead>
            <tbody>
                <asp:Literal ID="litStates" runat="server" />
            </tbody>
        </table>
    </div>

• javascript
• jquery
• jquery-ui
• jquery-dialog
• css

• What is the problem, exactly? (I'm assuming it can be bigger than its maxHeight, but I want to make sure.) Can you also paste #DialogScroll so we can see it here? Thanks. – JasCav Commented Dec 21, 2010 at 22:38
• Added the Dialog box's contents. What's happening is that maxHeight is set at 600 and the whitespace is all gone, which is great, but I can actually set the table (it's part of the jQuery datatables plugin) to show more records. Let's say 50. That extends past the maxHeight in IE. – jlrolin Commented Dec 22, 2010 at 14:04

2 Answers 2

Looks like it is a long standing open jQueryUI bug - at this link there's a work-around and a patch listed in the ments.

The link that Dean pointed to has a recent update with a great work-around that worked for me:

Additionally you could apply your own CSS by 'vol7ron'; something like:

$('#dialog')
   .dialog( { modal : true } )
   .css( { 'max-height' : '50px' } );

Therefore, in your case:

$("#DialogScroll").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 550,
    modal: true,
    resizable: false,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    },
    close: function () { }
}).css( { 'max-height' : '600px'} );