3

我在早上的大部分时间里都浏览了 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。

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

4

1 回答 1

1

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

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

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

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

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

于 2012-08-02T23:02:47.050 回答