DatePicker calendar width issue

DatePicker calendar width issue

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">

Date Picker Calendar Width









  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.