Question

我正在动态地将内容加载到对话框中，并且遇到了高度设置问题。如下所示，对话框的高度根本没有设置，其中的内容溢出。我已经尝试了许多修复但没有成功，包括在使用以下方法初始化对话框后更改高度。

$('#dialog').dialog('options', 'height', '1000px') $('#dialog').data('dialog.width', '1000px') $('#dialog').css('width', '1000px')

我尝试将对话框选项高度设置为自动，并将对象分配给具有相同结果的对话框。以下是我正在使用的当前代码。

dialog size issue

初始化对话框

//css for dialog class
.dialog-class {
    max-width: 1000px;
    min-width: 500px;
    margin: 0 auto;
    height: auto;
}

//Static on page
<div id="dialog"></div>

//Ajax call dynamically creates a collection of divs HTML below into a string called html
<div id="s-1">
    <div class="float-right">
        <div style="display: inline-block" class="ui-state-active ui-corner-all">
            <span class="ui-icon ui-icon-check"></span> 
        </div>
    </div>
</div>
<div id="s-2">
    <div class="float-right">
        <div style="display: inline-block" class="ui-state-active ui-corner-all">
            <span class="ui-icon ui-icon-check"></span> 
        </div>
    </div>
</div>

..等等，通常是上面那些10-20个div的集合。

var s = $('#dialog');
s.dialog({
    title: 'Section ' + id,
    modal: true,
    dialogClass: 'dialog-class',
    position: {
        my: 'center center',
        at: 'center top',
        of: window,
        collision: 'none flip'
    }
}).html(html);

即使在运行上面调整大小命令的控制台中没有做任何更改，基本上唯一有用的是静态设置大小，但是这是动态内容我需要它自动调整大小。

编辑以添加html构建器

$.ajax({
    type: 'POST',
    url: 'API/Service.svc/GetSlides',
    cache: false,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data : '{ json data }',
    success: function(data) {
        var slides = $.parseJSON(data.d);
        var html = '';
        var d; //hold date
        var icons; //holds jquery ui icons

        for( var i = 0; i < slides.length; i++) {
            if(NotNullOrBlank(slides.finished)) { //function to check for null, '', or undefined
                d = '<div>' + ISODateString(slides.finished)) + '</div>' // another function to format date
                icons = '<div class="float-right"><div style="display: inline-block" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check">' + d + '</span></div></div>';
            } else {
                icons = '<div class="right"><div style="display: inline-block" class="ui-state-active ui-corner-all"><span class="ui-icon ui-icon-check"></span></div></div>';
            }
            html +='<div id="s-' + slides[i].id + '" class="ui-corner-all">Slide ' + slides[i].id + icons + '</div>';
        }
    }
});

也不确定这是否有所不同，但此对话框嵌套在手风琴中。

jQuery 1.9.1 jQuery UI 1.10.3

jQuery UI对话框动态加载内容溢出对话框，强制调整大小不起作用

0 个答案: