Primeng Calendar嵌入Dialog时随页面滚动被截断问题求解

当在Dialog中使用PrimeNG日历组件并设置appendTo="body"时，页面滚动到底部后日历面板会出现被截断的情况，尝试过设置z-index、overflow: visible、将appendTo指定为Dialog本身等方法都无法解决。以下是几个可行的解决方案：

• 绑定appendTo到Dialog容器
  给Dialog添加模板引用变量，将日历的appendTo属性绑定到这个容器，让日历面板挂载在Dialog内部，继承Dialog的定位上下文，避免受页面滚动影响。
  示例代码：

  <p-dialog #dialogContainer header="示例对话框" [(visible)]="display">
    <p-calendar appendTo="dialogContainer"></p-calendar>
  </p-dialog>
  

• 调整样式确保溢出可见与定位正确
  覆盖Dialog内容容器的默认溢出样式，同时给日历面板设置固定定位，保证它不会被Dialog或页面的溢出截断：

  .p-dialog .p-dialog-content {
    overflow: visible !important;
  }
  .p-calendar-panel {
    position: fixed !important;
    z-index: 9999 !important;
  }
  

  注：实际项目中可以通过优化CSS选择器优先级来替代!important。

• 动态调整日历面板位置
  监听Dialog内容区域的滚动事件，根据Dialog的位置动态修正日历面板的定位：

  import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';
  import { Dialog } from 'primeng/dialog';
  
  export class AppComponent implements AfterViewInit {
    @ViewChild('dialogContainer') dialogContainer!: ElementRef<Dialog>;
    display: boolean = false;
  
    ngAfterViewInit() {
      const dialogContent = this.dialogContainer.nativeElement.querySelector('.p-dialog-content');
      dialogContent?.addEventListener('scroll', () => {
        const calendarPanel = document.querySelector('.p-calendar-panel');
        if (calendarPanel) {
          const dialogRect = this.dialogContainer.nativeElement.getBoundingClientRect();
          calendarPanel.style.top = `${dialogRect.top + 60}px`;
        }
      });
    }
  }
  

内容的提问来源于stack exchange，提问作者Caio Oliveira