The Datetimepicker is not displaying fully in the Bootstrap v3.3.7 model, despite my attempts to present it there. The date time picker is partially visible and partially hidden; similarly, the issue also arises in a responsive manner (on small device like mobile). I've attached two images that demonstrate the issue in detail.
The HTML code here is
<!-- Admission All modal dialog -->
<div class="modal fade" id="AdmissionAllModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center" id="myModalLabel">فہرست داخلہ دارجہ وار</h4>
</div>
<!-- /end modal header -->
<!-- modal body -->
<div class="modal-body">
<h4>داخلہ کی درجہ وار فہرست حاصل کرنے کے لیے ابتدائی اور آخری تاریخ کا اندراج کریں۔</h4>
<form id="AdmissionAllFormModal" method="post" action="onlineadmission/AdmissionAllReport.php">
<div class="form-group">
<label class="loginLabel">ابتدائی تاریخ</label>
<div class="input-group datetimePicker1">
<input class="datetimePicker1 form-control" type="text">
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<div class="form-group">
<label class="loginLabel">آخری تاریخ</label>
<div class="input-group datetimePicker1">
<input class="datetimePicker1 form-control" type="text">
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<input class="btn btn-primary" type="submit" name="SubmitToDelete" value="تلاش کریں۔">
</form>
<!-- /modal footer -->
</div>
</div>
</div>
<!-- end Admission All modal dialog -->
I'm using Bootstrap Datetimepicker version 4.17.47 and Bootstrap v3.3.7. Is there anyone who can assist me in displaying Datetimepicker fully on the popup model? as in the example image
I found the solution by making overflow: visible. Now the correct answer is given below code here
.modal-content {
overflow: visible;
}