jquery ui Dialog animation not smooth if text in DIV not long enough

Question

I have a jquery ui dialog box that I want to display at the bottom of the page for the complete width of the page. It should also auto size if the user scales the browser window. The idea being that it appears from the bottom of the window and stretches the full width of the window.

The code below does generate a dialog that stretches across the window and will auto size. The problem is, if the text in the helpDialog DIV is not long enough to go across the window, the dialog will open with the show animation and then jump/stretch to fit the window.

If the text is long enough to go across the screen, the dialog box just goes through it's nice show animation and looks like it appears from below the bottom of the window.

Any thought or suggestions? Thanks!

var windowWidth = $(window).width();
    $('#helpDialog_ABOUT').dialog({
    width: 'auto',
    position: { my: "right bottom", at: "left bottom", of: $(window)},
    draggable: false,
    autoOpen: false,
    modal: true,
    show: {
        effect: "drop",
        direction: "down",
        duration: 1000
        },
        hide: {
            effect: "drop",
            direction: "down",
            duration: 700
        }
    });
    $('#helpButton_ABOUT').click(function(){
        $('#helpDialog_ABOUT').dialog('open').width(windowWidth);
    });

Answer 1

Thanks to Kevin B for pointing me in the right direction.

Changed width:'auto' to width:'100%'

var windowWidth = $(window).width();
$('#helpDialog_ABOUT').dialog({
width: '100%',
position: { my: "right bottom", at: "left bottom", of: $(window)},
draggable: false,
autoOpen: false,
modal: true,
show: {
    effect: "drop",
    direction: "down",
    duration: 1000
    },
    hide: {
        effect: "drop",
        direction: "down",
        duration: 700
    }
});
$('#helpButton_ABOUT').click(function(){
    $('#helpDialog_ABOUT').dialog('open').width(windowWidth);
});