如何阻止jQuery UI对话框被压扁？

Question

I have a fairly simple div element which I want to turn into a popup via jQuery UI. The HTML is basically

<div id="login_form">
     <table> ... </table>
</div>

Without any jQuery involvement, it renders fairly naturally like this (the green background comes from the div and fits around its contents):

When I make it into a popup with this code:

 $(document).ready(function()
{
    $("#login_form") .dialog (
    {
        autoOpen: false
    });

    $("#login_or_sign_up") .click (function()
    {
        $("#login_form") .dialog ("open");
    });
});

It renders like this.

Yuck.

I'm fairly sure the reason is simply that I haven't included the jQuery UI CSS files. I don't want to include the jQuery UI CSS files.

By inspecting the popup I notice that jQuery has created another div which surrounds the one I provided, and this is styled to have a width of 300px. I expect this is the problem -- jQuery UI has picked a size which is too small and the inner elements are not reducing themselves to fit.

Can I make jQuery dialog-ify my div without shrinking it?

If not, I can probably work around this by adding width:100% styles to the inner elements individually. In that case, is there a general workaround which will not require me to alter any of the inner elements?

Answer 1

.dialog({ width: 'auto' })起作用。