打开对话框后将 JQuery 对话框的大小调整为内容高度

Question

我在早上的大部分时间里都浏览了 SO，但我没有发现任何东西可以帮助我做到这一点。

目标

我试图在 JQuery 对话框中复制 maxHeight 选项的行为。 此选项仅在调整对话框大小后适用，我希望在打开对话框时应用此属性，而不是在调整大小时应用。

除非发布新版本的补丁，否则我能做的最好的就是解决方法。

我的项目信息

C# 中的 ASP .NET 3.5

详情

我必须打开一个包含 gridview 的对话框（在对话框使用的 div 中），正常使用可以显示从 1 或 2 行到数十行的任何内容。

1. 我在 SO 上找到了一个解决方案，它暗示在我的 div 上设置“max-height”属性，但调整对话框大小有一个奇怪的效果，我试图摆脱它：

2. 如果内容足够小（通常只有几行的列表），则对话框很小，可以调整为更大的大小。 asp:gridview 不会移动，使对话框变大只会在其下方和右侧添加空白。

3. 但是一旦你再次拖动窗口边缘以使其更小，白色区域将保持相同大小，向上滑动并减小 gridview 区域，最终将其缩小到零。

4. 将 gridview 设置为 100% 可以解决此问题，但随后仅使用几行将窗口变大会使每行高几十个像素。

5. 所以我决定使用一个不可调整大小的对话框来固定高度，这样就不会以不应该的方式移动，但是小内容会在其下方填充空白，我们希望窗口可以调整.

最后我决定尝试将对话框打开到固定高度，然后在同一功能中调整其大小以适应我的内容如果内容 div 的高度小于 500 像素。

我的代码不起作用，我不知道如何得到它，或者即使有可能。

这是我的 JS：

function ShowReferedTasks(title, s) {

        // On affiche la div qui constitue le popup dialog
        document.getElementById('litReferedTasks').style.display = '';

        //On crée le dialog à partir de la même div       
        $('#litReferedTasks').dialog({
            autoOpen: true,
            modal: true,
            resizable: true,
            show: 'drop',
            hide: 'drop',
            width: 800,
            minHeight: 0,
            height: 500,
            title: 'Tâche' + s + ' référée' + s + ' de ' + title            
        });
        /*option 1 (used):*/ var heightDiv = document.getElementById('litReferedTasks').style.height;
        /*option 2:*/ //var heightDiv = $(this).height($('#litReferedTasks').height());
        if (heightDiv < 500)
        {
            $('#litReferedTasks').dialog('option', 'height', heightDiv);
            /*alternative I tried*/ //$("#dialog").dialog('option', 'height', heightDiv);
        }
    }

这是我的 div：

<div id="litReferedTasks" style="background-color: White; display: none; height:95%;">
    <asp:GridView ID="gvReferedTasks" runat="server" OnRowDataBound="gvReferedTasks_RowDataBound" Width="97.5%" Visible="false">        
    </asp:GridView>
    <asp:Label ID="lblNoReferedTasks" runat="server" Visible="false" Width="100%"></asp:Label>
</div>

如您所见，我希望我的函数打开对话框，然后确定包含 gridview 的 div 的大小，如果大小低于 500 像素，我希望对话框高度调整为 gridview，否则为大内容我将使用滚动条将其保持在 500 像素高。

感谢您对此的任何帮助。

更新 2：

下面的代码有效，但如果关闭我的对话框并重新打开它，则在大内容上调整大小会失败。 知道为什么吗？基本上它只工作一次，直到我刷新页面并刷新缓存（Ctrl+F5）

更新 1：

我结合了我的 js 脚本和@Paul Graffam 给我的内容：

将 div 设置为 inline-block 似乎有效，但随后 js 完成了大部分工作：

function ShowReferedTasks(title, s) {

    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog({
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        open: function(event, ui) {
            $(this).css({ 'overflow-y': 'auto' });
        },
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    });
    // Resizes the dialog to fit the content up to 500px, after which it overflows automatically.
    var heightDiv = $('#litReferedTasks').height();
    if (heightDiv > 450) $('#litReferedTasks').dialog('option', 'height', 500);
}

然后 div 会填满整个对话框，当它变得比它大时会溢出。 对话框首先打开以适应 div，无论它有多大，但随后查看 div 的大小，如果大于 500 像素，则将对话框的大小调整为 500px。

看起来它成功地完成了我想要它做的事情，没有在 div 上使用 max-height 带来的调整大小限制和问题。

Answer 1

我想出的一个简单的方法是把对话 div 的 css 设置为 max-height 设置为 500px，然后你可以删除对话内的高度设置。这样，任何超过 500 像素的东西都将被设置为溢出，而任何小于该值的东西都会自动调整大小，因为高度现在默认为自动。

由于 gridview 使用表格，我认为将 div 的显示设置为 display: inline-block; 并删除将显示设置为空的行很重要。

我在这里用你的一些代码设置了一个例子：http://jsfiddle.net/rrAJM/1/

另外，我注意到您一直在使用document.getElementById，但由于您使用的是 jQuery，因此没有必要这样做。相反，您可以通过以下方式选择您的元素：$('#litReferedTasks')

比如document.getElementById('litReferedTasks').style.height;变成$('#litReferedTasks').height();