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).
- I'm loading these in the header:
- jquery.js
jquery-ui.min.js
jquery-ui.theme.min.css
jquery-ui.min.css
- 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;
}
- There is an 'outer div' around the date fields:
<div style="text-wrap:none; margin:16px 0px 16px 0px;">
- <input type="text" name="mydate" id="mydate" size="10" class="DatePickerCalendar">
- <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.