Question

我有一个jQuery UI对话框，我已设法更改容器的宽度（外部框）但是其中的内容似乎是固定的：

这是HTML：

<div id="dialog" width="500px" title="Animal" style="display:none">

<center>

<input type="text" class="input" />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </center>
</div>

这是jQuery：

function check_domain_input()
    {        
        $( "#dialog" ).dialog({

        resizable: false,
        modal: true,
        width:'800',
        height:'500'

        }); 



        $("#dialog").css("width", "260px");

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog({modal: true});


        return false;
    }

Here is a screenshot of how it looks

需要帮助让内容适合整个方框

注意滚动条，即内容的大小......它不会超过这一点

Answer 1

从这里删除宽度

function check_domain_input()
    {        
        $( "#dialog" ).dialog({

        resizable: false,
        modal: true,
        width:'800',//remove this 
        height:'500'

        });

在这里你可以根据你的要求设置宽度！重要的是这样做

<div id="dialog" width="300px !important" title="Animal" style="display:none">

Answer 2

从脚本中删除$("#dialog").css("width", "260px")，因为它会将对话框div宽度设置为260px

为什么呢？

因为您的<div id="dialog"></div>宽度为260px，这是您对话的主体，并且您已经设置了对话height和width所以不需要提供$("#dialog")

的宽度和高度属性

$("#dialog").dialog({
   resizable: false,
   modal: true,
   width: '800', // Width already defined of dialog
   height: '500' // Height already defined of dialog
});

Fiddle Demo

Answer 3

尝试：

function check_domain_input()
    {        
        $( "#dialog" ).dialog({
            resizable: false,
            modal: true,
            width:'800',
            height:'500'
        }); 

        //$("#dialog").css("width", "260px");   <-- you can't just change the dialog width
        $( "#dialog" ).dialog( "option", "width", 260 );   // you should use the proper function

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0){
            return true;
        }

        $( "#dialog" ).dialog({modal: true});

        return false;
    }

您不仅可以调整dialog元素的大小，因为当您调用对话框函数时，jQuery会根据您的div构建它的对话框元素，因此您必须调用提供的方法来正确调整对话框的大小

jQuery UI对话框内容宽度没有变化

3 个答案: