JQuery UI диалог автоматически устанавливает ширину iframe - PullRequest
6 голосов
/ 29 августа 2011

Я хочу спросить, почему диалоговое окно jQuery UI автоматически устанавливает ширину в «auto»?

Ниже приведен мой iframe для создания диалогового окна.ширина и высота.Но каждый раз, когда я называю «диалог» («открыть»), ширина сама становится «автоматической».Что касается высоты, то было установлено какое-то фиксированное значение (я думаю, что оно рассчитывается с помощью jQuery UI)

Я уже установил ширину и высоту при инициализации диалога.Примерно так:

var dg = {};
dg.title = this.title;
dg.autoOpen = false;
dg.modal = true;
dg.overlay = { 
opacity: 0.4, 
background: "#000" 
        };                              
dg.resizable = false;
$('#pklist3').dialog(dg); //iframe width is still fixed value up to this line

Но после этого:

$('#pklist3').dialog('open'); //iframe width gets "auto" automatically

Это известное поведение?Есть ли способ, которым мы можем определить ширину и высоту iframe самостоятельно?

PS.Я использую jQuery UI 1.8.16 и jQuery 1.6.2, и ширина iframe не меняется при запуске диалога.Он меняется только после того, как я вызываю диалог («открыть»)

Ответы [ 3 ]

11 голосов
/ 29 октября 2012

В случае, если кто-то еще имеет дело с этой проблемой и натыкается на этот пост, как я сделал, я в конечном итоге нашел решение, которое работало для меня:

По сути, вы устанавливаете минимальную ширину в стиле iframe вместо (или дополнительно с) стиля ширины.

<iframe src="someurl" width="100%" height="100%" frameborder="0" 
        scrolling="no" style="min-width: 95%;height:100%;"/>
0 голосов
/ 25 марта 2015
<iframe src="<%= AppConfig[:running_url] %>" frameborder="0" scrolling="no"></iframe>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $("iframe").height($(window).height());
    $("iframe").width($(window).width());
  });
</script>

Я думаю scrolling="no" необходимо.

0 голосов
/ 29 августа 2011

Вы можете определить элемент width в init:

$('#something').dialog({
    width: '100px'
});
...