如何正確調整jQuery.ui對話框與iframe的大小

當我打開一個預定義大小（比如800x600）的jQuery對話框時，對話框中的iframe沒有正確調整大小。它看起來像它有默認的大小。事實上，高度還是可以的，但寬度似乎無緣無故地保持在300px。如何正確調整jQuery.ui對話框與iframe的大小

我創建的iframe和對話是這樣的：

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>'; 

someVar.dialog 
    ({ 
     title: command.buttonText, 
     autoOpen: false, 
     modal: false, 
     resizable: true 
    }) 
    .dialog('option', 'width', 800) 
    .dialog('option', 'height', 600);

我試圖把寬度和高度在init調用，結果是一樣的。如果我省略這兩個，那麼該對話框將使用默認值進行初始化，並且後續調整大小工作正常。

任何想法將有助於...

更新：

我包裹在一個div的iframe，然後創建了一個標準的電話對話：

someVar.dialog 
    ({ 
     title: command.buttonText, 
     autoOpen: false, 
     modal: false, 
     resizable: true, 
     width: 800, 
     height: 600 
    })

不一個真實解決方案，但它的工作...（它感覺骯髒，雖然！）

來源

2010-07-09 dr Hannibal Lecter

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>'; 

someVar.dialog({ 
    title: command.buttonText, 
    autoOpen: false, 
    modal: false, 
    resizable: true, 
    width:800, 
    height:600 
}).width(800-10).height(600-10);

編輯：也許我不明白你的意思correctly.Anyway什麼，PLZ檢查
Demo:

來源

2010-07-09 10:06:13 Kai

不，還是一樣.. :( – 2010-07-09 11:25:45

它應該是！.. plz檢查演示在http://jsbin.com/azidi3/edit – Kai 2010-07-09 11:52:38

我檢查了你的演示和是的，你理解我正確。我不確定它爲什麼不起作用，所以我最終將iframe包裝在一個div中，並使用CSS來使它看起來正確。在對話初始化之後，我甚至不需要額外的調用width（）和height（）。我仍然會通過接受你的回答來獎勵你的努力，因爲它應該工作，很像我的問題中的代碼...> – 2010-07-09 14:23:22

我解決它通過添加一些樣式IFrame的：

iframe#some-dialog { 
    width: 100% !important; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

來源

2012-10-01 11:18:26

這是唯一一個爲我工作的人。 – shazia 2013-02-05 00:53:58

是的，它也適用於身高。謝謝。 – Musketyr 2014-09-01 13:22:50

如何正確調整jQuery.ui對話框與iframe的大小

回答

相關問題