Question

点击日期选择器图标时，它会导航到表格的底部。因为它不适合td标记，

所以它搜索下一个父div标签。下一个div标签是一个表。所以它导航到表的底部。任何解决方案。

实际上，点击图标后，它会导航到底部。我再次需要向上滚动才能看到日期选择器

点击图标后

我需要向上滚动才能看到日期选择器

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>

提前致谢

Answer 1

所以它搜索下一个父div标签。下一个div标签是一个表。所以它导航到表的底部。任何解决方案。

据我所知，你发现父div标签中存在的问题，远离你的日期选择器显示位置。

所以你可以在你想要的地方添加第二个父div。

例如：

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

不要忘记尝试位置：相对; - 这也可能是问题的原因。

datepicker中的父div问题

1 个答案: