Friday, March 23, 2018

Bootstrap DatePicker Arrow Appears At The Bottom of Calendar

Hi,
I was asked by a developer on how to fix the arrow which appears at the bottom of the calendar dropdown and not below the textbox. This issue was raised in my previous post Bootstrap DatePicker Control in ASP.NET Webforms. The solution is to reference the bootstrap-datepicker.css instead of bootstrap-datepicker3.standalone.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
Output
That's it! :-)

0 comments:

Post a Comment