PrimeNG Calendar - appendTo something else than body

Question

The problem:
I am using a p-calendar, in a narrow HTML page : very low height. In that case, the calendar just hide the input field with a bad positionning

Step to reproduce :

• go to https://www.primefaces.org/primeng/#/calendar
• Resize the navigator window with a low value height
• Open some calendar
• Or go to blitzstack here and play with the console height: https://stackblitz.com/edit/github-stwowy

Result :
Calendar is covering the input field:

Solutions I am trying

• I tried [appendTo]="'body'" : it's not working, the calendar has a position that still hide the input field
• I want to append the calendar overlay to another thing:

    <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>

Here i have put many example of things I tried. All attachMe produce the same error :

Any Idea ? What am I doing wrong please ?

[EDIT] BLITZSTACK to play: https://stackblitz.com/edit/github-stwowy
Just make sure the console goes high enuff:

Answer 1

You can use [baseZIndex] value with appendTo="body".

Answer 2

Version -> Using in my application

• Angular CLI: 7.3.9
• Node: 12.13.1
• Angular: 7.2.15
• Primeng: 7.1.3

Try to use appendTo like this, it works for me

 [appendTo]="'body'"

Still fixing, always calendar will be open in bottom!

Answer 3

I have two Angular applications, and both have popups which needed the PrimeNG calendar component in them, and I didn't want the calendar to be cropped.

In the first app, simply adding this line worked fine - but - the popup was in the same .html page as the rest of the webpage. (So, it was one .html page, with both the regular page, and the markup for the popup.)

appendTo="body"

In the second app, the webpage opened a popup as a separate component, and there, this appendTo doesn't work at all.

So, my Answer to this question is that, yes, appendTo is a solution.... but annoyingly, it will not work all the time with Angular apps.

And you might have to make your Angular apps uglier, by moving the popup markup into the "calling" webpage, to make it work properly.