Display issue with jQuery dialog: form shows as separate window

Posted by RememberME on Stack Overflow See other posts from Stack Overflow or by RememberME
Published on 2010-03-29T03:52:58Z Indexed on 2010/03/29 4:03 UTC
Read the original article Hit count: 563

On my button click, the jQuery dialog appears with just the title and buttons. When you mouseover, then you see the form inputs in front of the dialog covering the buttons. When you scroll down, the form inputs do not move, so you can never see the last few textboxes.

<div id="popupCreateCompany" title="Create a new company"> 
<form>
<fieldset>
    <p>  
        <label for="company_name">Company Name:</label>
        <%= Html.TextBox("company_name") %>    
    </p>
    <p>
        <label for="company_desc">Company Description:</label>
        <%= Html.TextBox("company_desc") %>
    </p>  
    <p>
        <label for="address">Address:</label>
        <%= Html.TextBox("address") %>
    </p>
    <p>
        <label for="city">City:</label>
        <%= Html.TextBox("city") %>
    </p>
    <p>
        <label for="state">State:</label>
        <%= Html.TextBox("state") %>
    </p>
    <p>
        <label for="zip">Zip:</label>
        <%= Html.TextBox("zip") %>
    </p>
    <p>
        <label for="website">Website:</label>
        <%= Html.TextBox("website") %>
    </p>
    </fieldset>
    </form>

 </div>

jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $('input').filter('.datepick').datepicker();

        $('#popupCreateCompany').dialog(
                {
                    autoOpen: false,
                    modal: true,
                    buttons:
                    {
                        'Add': function() {
                            var dialog = $(this);
                            var form = dialog.find('input:text');
                            $.post('/company/create', $(form).serialize(), function() {
                                dialog.dialog('close');
                            })
                        },
                        'Cancel': function() {
                            $(this).dialog('close');
                        }
                    }
                });

        $("#create-company").click(function() {
            $('#popupCreateCompany').dialog('open');
        });

On mouseover: alt text

After scroll down: alt text

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui