Primefaces calendar does not readjust its position on window rotation

5
votes

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: enter image description here

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

  1. Now I rotate to landscape mode: enter image description here

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

  1. 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:

enter image description here

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

1
cssjsfprimefaces
This should be part of the underlying javascript component I think and not specifically PrimeFaces. It uses an external javascript component to do the real calendar thing. You can look in the source of PrimeFaces which that is (might be the 'old' jquery-calendar' or something newer which is unclear since you did not post version information, nor a minimal reproducible example, Regarding adding it to the body is a common solution to prevent other problems. You can check if the component has a 'appendTo' that might help in this case but it might result in other problemsn regarding placement, hiding (z-index) etc ' – Kukeltje
Sorry, forgot to add the PF version (6.2, I added it now to the post also). – actunderdc

1 Answers

4
votes

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