I have a jQuery UI dialog and I have managed to change the width of the container (outer box) however the content within it seems to be fixed:

Here is the HTML:

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

<center>

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

Here is the 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;
    }

Need help with getting the content to fit in the whole box

Notice the scrollbar, that is the size of the content... it does not go past this point

just remove width from here

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

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

        });

and here you can set width according to your requirement using !important do like this

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

more