c# - 打开对话框后有条件地将 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，否则为大contents 我将使用滚动条将其保持在 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 的大小，如果大于 500px，则将对话框缩小到 500px。

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

Answer 1

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

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

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

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

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