1

问题
我在一个狭窄的 HTML 页面中使用 p 日历:高度非常低。在这种情况下,日历只是隐藏了定位错误的输入字段

重现步骤

结果
日历覆盖了输入字段: 在此处输入图像描述

我正在尝试的解决方案

  • 我试过 [appendTo]="'body'" :它不起作用,日历的位置仍然隐藏输入字段
  • 我想将日历覆盖附加到另一件事:
    <ng-template #attachMe0></ng-template>
    <div id="attachMe1">
        <p-calendar #calendarRangeFacture
                    [(ngModel)]="rangeDates"
                    appendTo="attachMe0">
        </p-calendar>
    </div>

    <button class="blue-button" pButton  (click)="doIt()" label="OK"></button>
    <span id="attachMe2"></span>
    <div id="attachMe3"></div>
    <ng-template id="attachMe4"></ng-template>
    <ng-template #attachMe5></ng-template>

在这里,我举了很多我尝试过的事情的例子。所有 attachMe 都会产生相同的错误:
在此处输入图像描述

任何想法 ?请问我做错了什么?

[编辑] BLITZSTACK 玩:https
://stackblitz.com/edit/github-stwowy 只要确保控制台进入高电平: 在此处输入图像描述

4

2 回答 2

0

版本 -> 在我的应用程序中使用

  • 角 CLI:7.3.9
  • 节点:12.13.1
  • 角度:7.2.15
  • 初蒙:7.1.3

尝试像这样使用 appendTo,它对我有用

 [appendTo]="'body'"

仍在修复中,日历总是在底部打开!

于 2021-04-23T10:50:59.473 回答
0

我有两个 Angular 应用程序,它们都有弹出窗口,其中需要 PrimeNG 日历组件,我不希望日历被裁剪。

在第一个应用程序中,只需添加这一行就可以正常工作 - 但是 - 弹出窗口与网页的其余部分位于相同的 .html 页面中。(所以,它是一个 .html 页面,既有常规页面,也有弹出窗口的标记。)

appendTo="body"

在第二个应用程序中,网页作为一个单独的组件打开了一个弹出窗口,这appendTo根本不起作用。

在此处输入图像描述

所以,我对这个问题的回答是,是的,appendTo是一个解决方案......但令人讨厌的是,它不会一直与 Angular 应用程序一起工作。

您可能必须通过将弹出标记移动到“调用”网页中来使您的 Angular 应用程序更丑陋,以使其正常工作。

于 2021-10-06T08:46:55.543 回答