日期选择器对齐问题答案

【问题标题】：Datepicker Alignment Issue日期选择器对齐问题
【发布时间】：2021-07-01 03:34:44
【问题描述】：

在其自己的输入元素上方打开，或者有时在页面上的任何位置垂直打开。我需要它应该在输入元素下方打开。

现在它覆盖了自己的输入元素。

我发现这可能是位置功能的首要问题。

以下代码：

  setElemPosition() {
      const rect = this.elementRef.nativeElement.getBoundingClientRect();
      if (this.domele) {
         this.domele.style.position = 'absolute';
         this.domele.style.top = rect.top + this.elementRef.nativeElement.scrollHeight + 'px';
         this.domele.style.left = rect.left + 'px';
         this.domele.style.width = Math.floor(rect.width) + 'px';
         this.domele.style.zIndex = '9999999999';
      }
   }

【问题讨论】：

你能复制一个stackbltiz example?
不抱歉。您对 getBoundingClientRect() 有任何想法吗？
现在已经解决了。感谢您的评论。

标签： javascript css angular typescript angular9

【解决方案1】：

刚刚使用 window.pageYOffset。问题得到解决，现在可以正确显示对齐方式。

 setElemPosition() {
  const rect = this.elementRef.nativeElement.getBoundingClientRect();
  if (this.domele) {
     this.domele.style.position = 'absolute';
     this.domele.style.top = rect.top + window.pageYOffset + this.elementRef.nativeElement.scrollHeight + 'px';
     this.domele.style.left = rect.left + 'px';
     this.domele.style.width = Math.floor(rect.width) + 'px';
     this.domele.style.zIndex = '9999999999';
  }

【讨论】：