jQuery Forum

Please look at my image below to see my issue.The calendar is breaking out of the div / container?

I've put the thick solid red border around it to help show what's really going on (see image below).

1. I'm loading these in the header:
   
2. jquery.js
   jquery-ui.min.js
   jquery-ui.theme.min.css
   jquery-ui.min.css
   

1. I also added to my CSS... but this CSS isn't solving the issue below.
   
   
   .ui-datepicker {    width: 216px;
       height: auto;
       font: 9pt Arial, sans-serif;
       border: thick solid red;
   }

1. There is an 'outer div' around the date fields:
   <div style="text-wrap:none; margin:16px 0px 16px 0px;">

1. <input type="text" name="mydate" id="mydate" size="10" class="DatePickerCalendar">
   

1. <script type="text/javascript">
   $(document).ready(function(){
      
       $(".DatePickerCalendar").datepicker({
           dateFormat: 'mm\/dd\/yy',
           closeText: "Close",
           dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa']
       }); //DatePickers
   
   }); //document ready
   </script>
   

Thank you for your assistance.

I have a form that uses the 'tricks' for custom methods and messages found here:  (see link below):