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:

Thanks for info, but of course I tried ```appendTo="body"``` and ```[appendTo]="body"``` and ```[appendTo]="'body'"``` (with single quotes) and every other combinations. nothing works I still have the problem — Deunz, Mar 06 '19 at 11:10
how about setting a margin-top for the date picker panel something like [this](https://stackblitz.com/edit/angular-nhqxej) — Hana Wujira, Mar 06 '19 at 11:44
Target element to attach the overlay, valid values are "body" or a local **ng-template** variable of another element. — MoxxiManagarm, Mar 06 '19 at 11:45
@MoxxiManagarm thanks for this, but Below code show other html elements i tried among which you can see 2 ng-templates. Same error with them — Deunz, Mar 06 '19 at 12:58
@All : added a blitzstack so you can tried all by your self and play with all attacheMe elements — Deunz, Mar 06 '19 at 13:57
No sorry, i don't work on that project anymore, and this problem remains on it :) — Deunz, Dec 05 '19 at 09:22
Somehow appendTo="body" is not working. But appendTo can also be used with expression. For example appendTo="@(body)" — Noopur Dabhi, May 18 '20 at 13:36

score 3 · Answer 1 · answered Mar 17 '22 at 06:12

3

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

answered Mar 17 '22 at 06:12

Harshit G.

31
2

score 0 · Answer 2 · answered Apr 23 '21 at 10:50

0

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!

answered Apr 23 '21 at 10:50

Amitesh Singh

162
2
7

score 0 · Answer 3 · answered Oct 06 '21 at 08:46

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.

PrimeNG Calendar - appendTo something else than body

3 Answers3