使JQuery UI對話框自動增長或縮小以適應其內容

120

我有一個顯示錶單的JQuery UI對話框彈出窗口。通過選擇表單上的某些選項，新選項將出現在表單中，導致其變長。這可能導致主頁面具有滾動條並且JQuery UI對話框具有滾動條的情況。這種雙滾動條的情況對用戶來說很難看而且令人困惑。使JQuery UI對話框自動增長或縮小以適應其內容

我怎樣才能使JQuery UI對話框增長（可能收縮），以始終適合其內容而不顯示滾動條？我寧願只在主頁面上顯示一個滾動條。

來源

2009-04-16 MikeN

我建議張貼代碼的樣本，就很難推薦一個解決方案，而看到對話框的結構。 – Diego 2009-04-16 14:22:15

128

更新：在jQuery UI 1.8，工作液（如第二條評論中提及）是使用：

width: 'auto'

使用自動調整：真正的選項。我將舉例說明：

<div id="whatup"> 
    <div id="inside">Hi there.</div> 
    </div> 
    <script> 
    $('#whatup').dialog(
     "resize", "auto" 
    ); 
    $('#whatup').dialog(); 
    setTimeout(function() { 
     $('#inside').append("Hello!<br>"); 
     setTimeout(arguments.callee, 1000); 
     }, 1000); 
    </script>

這裏有一個工作示例： http://jsbin.com/ubowa

來源

2009-04-19 04:47:45 cgp

嗯..將不得不延長我的[FrameDialog]（http://plugins.jquery.com/project/jquery-framedialog）..它本質上是一種創建用於對話框的iframed內容的方法..它不是完美的，但對於我需要的項目來說效果很好。 – Tracker1 2009-04-19 05:44:35

答案是創建對話框時，設置

autoResize:true

財產。爲了這個工作，你不能爲對話框設置任何高度。因此，如果您在其創建者方法或任何樣式中爲對話框設置固定的像素高度，autoResize屬性將不起作用。

來源

2009-04-16 14:42:40 MikeN

奇妙:)但爲什麼jQuery沒有把它放在他們的文檔？！。無論如何謝謝你。 – 2010-10-12 18:08:41

小心，不能通過觸發器插件定位（在我的，關閉等） – Jeffz 2012-05-31 11:40:33

var w = $('#dialogText').text().length; 

$("#dialog").dialog('option', 'width', (w * 10));

做了什麼，我需要它調整大小的對話框的寬度做。

來源

2011-01-31 05:35:34 user596393

自動支持高度。

寬度不是！

要做某種自動獲得您顯示的div的大小，然後設置窗口。

在C＃代碼..

TheDiv.Style["width"] = "200px"; 

    private void setWindowSize(int width, int height) 
    { 
     string widthScript = "$('.dialogDiv').dialog('option', 'width', " + width +");"; 
     string heightScript = "$('.dialogDiv').dialog('option', 'height', " + height + ");"; 

     ScriptManager.RegisterStartupScript(this.Page, this.GetType(), 
      "scriptDOWINDOWSIZE", 
      "<script type='text/javascript'>" 
      + widthScript 
      + heightScript + 
      "</script>", false); 
    }

來源

2011-12-07 13:57:03

我用下面的屬性，它爲我工作得很好：

$('#selector').dialog({ 
    minHeight: 'auto' 
});

來源

2012-11-06 09:13:08 emolah

這工作與jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});

來源

2013-06-05 03:25:15 IlludiumPu36

如果您需要它在IE7中工作，則不能使用undocumented, buggy, and unsupported{'width':'auto'}選項。相反，以下內容添加到您的.dialog()：

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

無論.scrollWidth包括右側填充依賴於瀏覽器（Firefox Chrome的不同），這樣你就可以添加像素的主觀的「足夠好」的數.scrollWidth，或用您自己的寬度計算功能替換它。

您可能希望在.dialog()選項中包含width: 0選項，因爲此方法不會減小寬度，只會增加寬度。

經測試，在IE7，IE8，IE9，IE10，IE11，火狐30，鉻35，和Opera 22的工作

來源

2014-06-25 23:02:50

使JQuery UI對話框自動增長或縮小以適應其內容

回答

相關問題