Primeng: Ability to configure the Calendar Overlay Position

[kartik468]

Current behavior
I have requirement where i want calendar to open always to the bottom of input. There is no way that i can specify position of the calendar.
Currently position is calculated based on view port.
I am facing an issue when my parent is having overflow auto then the calendar gets cut on the top.

Expected behavior
There should be some option like align=top/bottom

What is the motivation / use case for changing the behavior?
I am facing an issue when my parent is having overflow auto then the calendar gets cut on the top. So needed some option where i can specify the position

Please tell us about your environment:
Windows

Angular version: "~7.2.0"

PrimeNG version: "^7.0.0"

Browser: Chrome

Language: [all | TypeScript X.X | ES6/7 | ES5]

Node (for AoT issues): node --version =

[aszechlicki]

autoalignment would also be nice (i.e. calendar could detect if it has enough space to open on top/bottom and open in different location if not)

[kartik468]

@aszechlicki They have logic of computing space and auto aligning to top or bottom. That logic is correct but in some cases where your have some parent that has overflow auto then it gets hidden.

[akhlesh]

@kartik468 you should use appendTo with body, that way overflow won't impact calendar popup and it will be rendered outside of parent.

[kartik468]

@akhlesh I have used appendTo = 'body'.
but when you scroll the parent element the position of the overlay not changing as it is appended to body.

So it is better to have property like align which allows values like bottom or top

[dmytro-gokun]

@kartik468 This thing about "overflow: auto" looks like a bug to me (I also see this behavior with "overflow: scroll", btw). Do you agree? Or is documented limitation of the component?

[markleppke]

It's also valuable to control position to be left or right in addition to being top or bottom. Sometimes in a design, you need to put important text above or below a field and that information is helpful to understand the context of that field. Being able to turn off autopositioning and specifying a manual left, right, top, the bottom would be a great addition!

[amuchaware]

I was solve this issue
1) for top:
p-calendar {
.ui-datepicker {
top: -289px !important;
}
}

2) For align to bottom:
p-calendar {
.ui-datepicker {
top: 29px !important;
}
}

[BhupathiReddyGaddam]

Current behavior
I'm able to open the calendar at bottom of the input field but whenever it opens we need to scroll down to pick the date, it is not overlaying top of the body.

I have set higher z-index but it is not helpful. I have used appendTo = 'body'.
but when we scroll the parent element the position of the overlay not changing as it is appended to body.

Expected behavior is to pop up the calendar at top or bottom of the input filed and when we scroll it should stick with parent instead of appending to the body.

[SudhakarSanagar]

Solution ->
I found the same issue, then I tried applying the CSS * {overflow: visible !important } then it started displaying the calendar popup as expected.
I reached out to the final conclusion that if we apply overflow-x visible to the immediate 2 divs inside the p-table tag it is working as expected.

And If we want the horizontal scroll to the table then we need to apply that to parent div of the p-table tag.

[joelkperkins]

this library is too well made for these overflow hacks to be in place in people's applications... @primeng needs to fix