fix(module:time-picker): scroll to wrong position in datepicker (#4961)

* fix(module:time-picker): scroll to wrong position in datepicker * chore: add style to ul element
NG-ZORRO · Apr 3, 2020 · cdf387f · cdf387f
1 parent 70b2fc3
commit cdf387f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/components/time-picker/time-picker-panel.component.spec.ts b/components/time-picker/time-picker-panel.component.spec.ts
@@ -131,6 +131,15 @@ describe('time-picker-panel', () => {
         listOfSelectContainer[1].querySelector('.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner').textContent
       ).toContain(now.getMinutes().toString());
     });
+
+    it('should offsetTop is right', fakeAsync(() => {
+      testComponent.value = new Date(0, 0, 0, 0, 0, 0);
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      const listOfSelectedLi = panelElement.nativeElement.querySelector('.ant-picker-time-panel-cell-selected');
+      expect(listOfSelectedLi.offsetTop).toBe(0);
+    }));
   });
   describe('disabled time-picker-panel', () => {
     let fixture: ComponentFixture<NzTestTimePanelDisabledComponent>;

diff --git a/components/time-picker/time-picker-panel.component.ts b/components/time-picker/time-picker-panel.component.ts
@@ -49,7 +49,7 @@ export type NzTimePickerUnit = 'hour' | 'minute' | 'second' | '12-hour';
       <div class="ant-picker-header-view">{{ dateHelper.format(time?.value, format) || '&nbsp;' }}</div>
     </div>
     <div class="ant-picker-content">
-      <ul *ngIf="hourEnabled" #hourListElement class="{{ prefixCls }}-column">
+      <ul *ngIf="hourEnabled" #hourListElement class="{{ prefixCls }}-column" style="position: relative;">
         <ng-container *ngFor="let hour of hourRange">
           <li
             *ngIf="!(nzHideDisabledOptions && hour.disabled)"
@@ -64,7 +64,7 @@ export type NzTimePickerUnit = 'hour' | 'minute' | 'second' | '12-hour';
           </li>
         </ng-container>
       </ul>
-      <ul *ngIf="minuteEnabled" #minuteListElement class="{{ prefixCls }}-column">
+      <ul *ngIf="minuteEnabled" #minuteListElement class="{{ prefixCls }}-column" style="position: relative;">
         <ng-container *ngFor="let minute of minuteRange">
           <li
             *ngIf="!(nzHideDisabledOptions && minute.disabled)"
@@ -79,7 +79,7 @@ export type NzTimePickerUnit = 'hour' | 'minute' | 'second' | '12-hour';
           </li>
         </ng-container>
       </ul>
-      <ul *ngIf="secondEnabled" #secondListElement class="{{ prefixCls }}-column">
+      <ul *ngIf="secondEnabled" #secondListElement class="{{ prefixCls }}-column" style="position: relative;">
         <ng-container *ngFor="let second of secondRange">
           <li
             *ngIf="!(nzHideDisabledOptions && second.disabled)"