CODEWITHSUNDEEP
javascriptjquery-uijquery-validatejquery-ui-dialog
Rajeev
Rajeev

Reputation: 146

jQuery UI 1.10.3 Dialog Box, dragging moves away dialog box

I am using jQuery 1.10.1 with migrate, jQueryUI 1.10.3, jQueryValidate 1.11.1.

Just using a simple form, it has two fields. On submit if values are not provided then a dialog box is displayed with a message.

Issue: In IE 10 When user tries to move (drag) the error message dialog box it just moves down. This only happens when vertical scroll bar is appears in the browser window. Verified in Chrome 27 it works. Sometimes gives the same issue in Firefox 21 and Opera 12.15.

Note: It works fine with jQuery UI 1.10.2 only issue is there in 1.10.3.

Sample Source

<html>
<head>
    <style type="text/css">
        .label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;}
        .label1 {width:350px; text-align:right; padding-top:300px;padding-bottom:30px; font-weight:bold;  }
    </style>

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <!-- <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script> -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script> 

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 

    <script>
    $(function() {
        $("#register-form").validate({
            rules: { firstname: "required", lastname: "required" },
            messages: { firstname: "Need First Name", lastname: "Need Last Name" },
            showErrors: function(errorMap, errorList) {
                        $("#diverror").dialog({ modal: true });
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    });
    </script>
</head>
<body>
    <form method="post" id="register-form">
        <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
        <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />

        <div class="label1">Making page to scroll. Scroll down to submit</div>
        <div class="label1">Making page to scroll. Scroll down to submit</div>
        <div class="label1">Making page to scroll. Scroll down to submit</div>

        <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
  </form>
    <div id="diverror" title="Basic dialog"><p>This is the default DIVERROR which is useful for displaying information.</p></div>
</body>
</html>

Upvotes: 4

Views: 4249

Answers (1)

Rajeev
Rajeev

Reputation: 146

Verified jQuery UI website, its a bug in jQuery UI.

Ticket# 9354: http://bugs.jqueryui.com/ticket/9354

Ticket# 9315: http://bugs.jqueryui.com/ticket/9315

Upvotes: 5

Related Questions