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:
After scroll down:
© Stack Overflow or respective owner