Primefaces DatePicker does not update its position on window rotation

2
votes

We use a DatePicker component in our project. Primefes Version 8.0.

The position of the DatePicker popup does not change after the position of the input field has changed (for example, after rotating the tablet). The problem was fixed for the Сalendar component, but we use DatePicker because:

DatePicker is designed to replace the old p:calendar component.

You can see this problem on the official website.

Here are some screenshots: enter image description here

After changing the screen size, the pop-up position was not updated: After changing the screen size, the pop-up position was not updated

Is there any way to fix this by extending PrimeFaces.widget.Calendar with javascript?

Thank you for any help.

1
javascriptjqueryprimefacesdatepickerjquery-ui-datepicker

1 Answers

3
votes

You can fix this right now for yourself just add this Javascript to your page or site.

Example XHTML:

<p:datePicker id="popup" widgetVar="dpPopup" value="#{calendarView.date2}" />

JavaScript to add to your page:

$(window).on('resize.datepicker', function() {
    setTimeout(function () {
        for (item in PrimeFaces.widgets) {
            widget = PrimeFaces.widgets[item];
            if (widget instanceof PrimeFaces.widget.DatePicker) {
                    widget.jq.datePicker('alignPanel');
            }
        }
    }, 10);
});

Issue reported: https://github.com/primefaces/primefaces/issues/5984

Fixed for 9.0: https://github.com/primefaces/primefaces/pull/5985