jQuery dialog title bar width issue

Question

When I am increasing size of dialog after opening it then dialog height and width is increasing but dialog title bar width is not increasing. I just do not understand why it is happening.

Here is my code:

<style type="text/css">
    .BusyStyles {
        background-image: url('../images/ajax-loader.gif');
        background-repeat: no-repeat; background-position: center center; 
        height: 80px;
        width: 180px;
    }
</style>

<script type="text/javascript">
    $("#dialog").dialog({
        autoOpen: false,
        height: 80,
        width: 180,
        modal: false,
        draggable: true,
        resizable: false,
        position: 'center',
        show: {
            effect: "fade",
            duration: 2000
        },
        hide: {
            effect: "fade",
            duration: 500
        }
    });

    $("#dialog").removeClass('ui-dialog-content ui-widget-content').addClass('BusyStyles')
    $("#dialog").dialog("open");
</script>

On another button click I am increasing size of dialog like this:

$(".ui-dialog").animate({
    left: $(document).width() / 2 - $("#dialog").width() / 2, 
    top: $("#dialog").top
}, 1000);

What do I need to add in my code so that the result dialog title width would increase along with dialog width?

Thanks

Answer 1

you should use the option method to increase the dialog size:

$( "#dialog" ).dialog('option', 'width', 600);

Answer 2

Use for example FireBug to see which div is the parent container to all other divs of dialog (jQuery dialog is build from many div elements). Then you will be sure that you are resizing correct div. And title bar will be resized for sure...