Primefaces calendar does not readjust its position on window rotation

Question

I am struggling with a primefaces calendar problem on a webpage rendered on a mobile device (tablet). It seems that the css values calculated by primefaces to show the popup calendar are not recalculated on window rotation (you need to click on it again to recalculate).

Here is an example:

1. I have my webpage displayed in portrait mode. I clicked the calendar icon and the position of the popup is good:

(notice the css with left: 719.406px, calculated by primefaces). Everything OK so far.

2. Now I rotate to landscape mode:

Notice that the popup is no longer near the calendar icon. Also, the css states that, by having the same left value.

3. In order to get it correct, I need to click anywhere on the screen to close the pop up, then click again on the calendar icon:

The position is now good, with a different and correct value of left: 1061.91px.

How can I make primefaces automatically readjust the css without having to double click each time?

The solution found for me so far was to add a custom value for the right alignment with the screen and override the left one:

.ui-datepicker.ui-widget.ui-widget-content {
  left: auto !important;
  right: 10px; 
}

But the above solution is very specific for this screen and luckily because I always have the calendar button in the right part of the screen, so I can always assume that 10 pixels from the right will look ok.

I also noticed that ui-datepicker-div is a child of body element, so I cannot link it with the button with css.

Any ideas/help of a general solution will be highly appreciated. Primefaces version: 6.2

Answer 1

This problem is fixed with Primefaces 7.0.RC3. It was released a week ago. https://mvnrepository.com/artifact/org.primefaces/primefaces/7.0.RC3