Parent div issue in datepicker - html

Question

While clicking date picker icon it navigates to the bottom of the table.because it's not fit to the td tag,
So it searching for next parent div tag.The next div tag is a table.So it navigates to the bottom of the table. any solution for that.
Actually, after clicking the icon, it navigates to the bottom. Again I need to scroll up to see the date picker
After click icon
after i need to scroll up to see the date picker
HTML:
<div class="row grid-main m-0">
<div class="col-md-12">
<div class="grid-table table-responsive">
<table class="table">
<thead>
<tr>
<th> {{'911_LBL_MONTH' | translate}}</th>
<th>{{'911_LBL_FRMDATE' | translate}} <sup class="required">*</sup></th>
<th>{{'911_LBL_TODATE' | translate}} <sup class="required">*</sup></th>
<th>
<sortable-header [headerText]="'911_LBL_UPDATEDBY'" [sortField]="'ModifiedBy'" [items]="applicationdetail" (changeCurrentSortField)="changeCurrentSortField($event)"
[currentSortField]="currentSortField"></sortable-header>
</th>
<th>
<sortable-header [headerText]="'911_LBL_LASTUPDATED'" [sortField]="'ModifiedDate'" [items]="applicationdetail" (changeCurrentSortField)="changeCurrentSortField($event)"
[currentSortField]="currentSortField"></sortable-header>
</th>
<th class="text-center">{{'911_LBL_APPCOUNT' | translate}} </th>
</tr>
</thead>
<tbody>
<ng-template [ngTemplateOutlet]="tmpltTbl"
[ngTemplateOutletContext]="{ $implicit: itm, idx: i }"></ng-template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<ng-template #tmplt let-item>
<tr *ngFor="let item of applicationdetail; let i = index">
<td>{{montharray[i] | translate}}</td>
<td *ngIf="item.FromDate">
<div>
<app-date [inputDate]="item.FromDate" [index]="i"
(emitDate)="assignFromDate($event,i)"
[minDate]="minDate[i]"
[maxDate]="maxDate[i]"
[isDisabled]="item.DisablePassedFromDate"
controlName="FromDate{{i}}"
[isConditional]="true"></app-date>
</div>
</td>
<td *ngIf="item.ToDate">
<div>
<app-date [inputDate]="item.ToDate" [index]="i"
(emitDate)="AssignToDate($event,i)"
[minDate]="toMinDate[i]"
[maxDate]="toMaxDate[i]"
[isDisabled]="item.DisablePassedToDate || item.FromDate==null"
controlName="ToDate{{i}}"
[isConditional]="true"></app-date>
</div>
</td>
<td> {{isEnglish ? item.ModifiedBy : item.ModifiedBy_AR}} </td>
<td>{{item.ModifiedDate}}</td>
<td class="text-center"><button type="submit" class="btn btn-primary btn-radius" (click)="openDialog(this.item,i)" data-backdrop="static" data-toggle="modal" data-keyboard="false" data-target="#myModal" value="submit" title="{{'CMN_BTN_MANAGETITLE' | translate}}">{{'911_LBL_MANAGE' | translate}} </button></td>
</tr>
</ng-template>
Thanks in advance

Answer 1

So it searching for next parent div tag.The next div tag is a table.So it navigates to the bottom of the table. any solution for that.
As I understand you find, that problem in the parent div tag, that is far away from your datepicker showing place.
So you can add second parent div where you want it.
For example:
<div style="position: relative;">
<div style="position: relative;">
<app-date [inputDate]="item.FromDate" [index]="i"
(emitDate)="assignFromDate($event,i)"
[minDate]="minDate[i]"
[maxDate]="maxDate[i]"
[isDisabled]="item.DisablePassedFromDate"
controlName="FromDate{{i}}"
[isConditional]="true"></app-date>
</div>
</div>
Don't forget to try with position: relative; - It also can be reason of problem.