在jQueryUI对话框上调整高度以达到最大内容的高度 [英] Adjust height on jQueryUI dialog to be as tall as content up to a max

问题描述

使用jQueryUI的对话框，我想弹出信息。我的问题是我想将对话框的高度设置为高的内容。如果我不指定高度，这工作完美。高度根据内容的高度自动计算。问题是如果内容非常高，对话框也变得很高，并低于窗口... maxHeight在这种情况下也不能很好地工作。

所以我已经能够通过在显示弹出窗口后调整高度和位置来解决这个问题。但是，当内容正在加载（通过ajax）时，它会远远低于屏幕。只有完成后，我可以重新调整窗口。

更新：结果我想要的东西不仅仅是a maxHeight。我想要一个最大INITIAL高度。所以在加载数据对话框后，它只能增长到一定的高度。但之后，你可以扩大窗口。这很容易实现：

  $（'< div>< div>< / div>< div（>'）。attr（'title'，options.title）.appendTo（'body'）。dialog（{
 open：function（）{
 $（this）.children （'maxHeight'，maxInitialHeight）.load（url，function（）{
 thisDialog。$ dialog.dialog（'option'，'position'，'center'）; 
}）; 
} 
}）; 
  

这将动态加载一个对话框，从'url'内容到maxInitialHeight高度。

您可以将内容插入< div class = dialog-data/> 并将该对话框的内容设为div。

然后你可以使用CSS指定 max-height 和 overflow：auto 到您的 div.dialog-data 。

Using jQueryUI's dialog boxes, I want to popup information. My problem is I want to set the height of the dialog to however high the content is. If I don't specify a height, this works perfect. The height is automatically calculated based on the height of the content. Problem then is if the content is very tall, the dialog gets very tall too and goes below the window... maxHeight doesn't work well in this case either.

So I've been able to somewhat resolve this by adjusting the height and position after displaying the popup. However, while the content is being loaded (through ajax), it goes well below the screen. It's only after finishing that I can readjust the window. I'd rather not have that awkward delay.

UPDATE: Turns out I want something even more than just a maxHeight. I want a max INITIAL height. So after loading the dialog with data, it can only grow to a certain height. But after, you're allowed to expand the window. It's pretty easy to accomplish this:

$('<div><div></div></div>').attr('title', options.title).appendTo('body').dialog({
    open: function() {
        $(this).children().css('maxHeight', maxInitialHeight).load(url, function() {
            thisDialog.$dialog.dialog('option', 'position', 'center');
        });
    }
});

That will dynamically load a dialog from 'url' with content up to a maxInitialHeight height. The 2 divs nested are necessary.

解决方案

You could insert your content inside a <div class="dialog-data" /> and make that div the content of your dialog.

Then you could, with CSS, specify a max-height and overflow: auto to your div.dialog-data.

这篇关于在jQueryUI对话框上调整高度以达到最大内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！