How do I fix a jQuery Dialog that is stretching vertically across my site?

Question

I have a jQuery dialog defined as follows

<div id="emaildialog" title="Contact Us">
    <!-- Html.RenderPartial("ContactUs"); -->
    <div>This is a test</div>
</div>


<script type="text/javascript">
    (function ($) {
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function() {
            $( "#emaildialog" ).dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode",
                width: 700,
                modal: true,
                position: 'center'
            });

            $( "#viewselected" ).click(function() {
                $( "#emaildialog" ).dialog( "open" );
                return false;
            });
        });                
    })(jQuery);
</script>

When I click on the button that causes the dialog to show up, the dialog is centered in the middle of the screen, but it span the entire height of the we page. Specifically, the title bar itself stretches and the content at the bottom of the dialog seems fine.

Does anyone know what might be causing this and how to fix it?

I noticed one odd thing. If I click on the side of the dialog to resize the dialog, then it redraws itself properly, and upon inspecting the css I noticed that the dialog has it's position changed from relative to absolute, but this is all done inside jQuery UI, so I'm not sure how to fix this in my code.

The css I'm using is linked from google:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/
    1.7.2/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />

You can see the site here for the css: http://dev.thinkterrabella.com/

Answer 1

You dont need to specify the dialog width. If you remove it form the dialog setup function when the dialog will open it will size according to it's content and if bigger than the viewport it will have scrollbars.

as you're returning a partial view it's better not to specify it's size and let him choose the right one.

hope it helps!

Issue:

Why are you using jQueryUI 1.8.5 together with a theme from 1.7.2??? maybe something in the css is breaking your site. I advice you to change theme css pointing to the 1.8.5 release here: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/start/jquery-ui.css