PrimeNG p-calendar组件浏览器缩放适配问题求助

问题说明 #

使用PrimeNG的p-calendar组件时遇到两个异常：

• 浏览器100%缩放时输入框消失，缩至60%时显示正常
• 尝试通过transform: scale(0.9)缩小日历弹窗后，弹窗与输入框位置不贴合

解决方案 #

一、修复输入框消失问题 #

• 移除重复属性：代码中重复定义了inputId（同时写了icondisplay和start_date），这会导致DOM属性冲突，引发渲染异常，保留其中一个即可（建议保留inputId="start_date"）。
• 添加输入框最小宽度：检查父容器是否有overflow: hidden或过小的固定宽度，给输入框设置最小宽度避免被截断：

:host ::ng-deep .p-calendar .p-inputtext {
  min-width: 180px;
  box-sizing: border-box;
}

二、修复日历弹窗与输入框不贴合问题 #

transform: scale()仅改变视觉尺寸，不会修改元素占据的布局空间，因此会导致错位，推荐以下两种替代方案：

方案1：调整日历内部元素尺寸（推荐）

直接修改日历的字体、内边距来缩小整体尺寸，避免布局偏移：

:host ::ng-deep .scale-calendar .p-datepicker {
  font-size: 0.9rem;
}
:host ::ng-deep .scale-calendar .p-datepicker td,
:host ::ng-deep .scale-calendar .p-datepicker th {
  padding: 0.3rem;
}
:host ::ng-deep .scale-calendar .p-datepicker-header {
  padding: 0.5rem;
}

方案2：修正缩放后的定位偏移

如果必须使用缩放，通过调整原点和边距来对齐输入框：

:host ::ng-deep .scale-calendar .p-datepicker {
  transform: scale(0.9);
  transform-origin: top left; /* 以左上角为缩放原点 */
  margin-top: 4px;
  margin-left: 4px;
}

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