primeng p-压延机尺寸对话框压延机问题

Question

我使用了但是如果导航器的缩放为100％，则日历的输入将变得不可见

我们可以帮助我吗，我尝试使用此代码，它显示日历未粘在输入上

<p-calendar 
    [(ngModel)]="date1" 
    [showIcon]="true" 
    [iconDisplay]="'input'" 
    [showOnFocus]="false" 
    inputId="icondisplay" 
    [showTime]="true"
    inputId="start_date"  
    dateFormat="dd/mm/yy"
    [placeholder]="'jj/mm/yyyy hh:mm'" 
    styleClass="scale-calendar" 
    /> :host ::ng-deep .p-datepicker {
        transform: scale(0.9); /* Adjust the scale to your desired value */
      }

Answer 1

您可以通过两种方式解决：

• 您还可以调整选择器覆盖层的位置，让您的

  p-calendar

  并向其添加一个类，例如，我们将其称为

  calendarContainer

<p-calendar 
    [(ngModel)]="date1" 
    [showIcon]="true" 
    [iconDisplay]="'input'" 
    [showOnFocus]="false" 
    inputId="icondisplay" 
    [showTime]="true"
    inputId="start_date"  
    dateFormat="dd/mm/yy"
    [placeholder]="'jj/mm/yyyy hh:mm'" 
    class="calendarContainer"
/>

现在，让我们来设计造型吧

.calendarContainer {
  position: relative;
  height: 50px;
}

.calendarContainer  > .p-datepicker {
  top: calc(100% + 60px + 10px) !important;
}

• 100%，因为我们希望它位于底部
• 60px是我们日历输入的高度
• 10px是日历输入的填充

这将导致

如果您想将其显示为弹出窗口，您可以将

touchUI

属性添加到日历中。 看起来像这样：