Проблема с календарем первичных лиц в диалоговом компоненте

Добрый день, давно ищу решение этой проблемы, но так и не нашел. Надеюсь, кто-то из вас сможет мне помочь.

У меня есть компонент календаря Primefaces (v6.2, тема омега) (всплывающее, а не встроенное) внутри диалогового компонента. При открытии диалогового окна и нажатии на поле ввода календаря появляется всплывающее окно календаря. Я бы хотел, чтобы он появлялся рядом с полем ввода (почти его обычное поведение вне диалога). Однако проблема, с которой я сталкиваюсь, заключается в том, что когда я прокручиваю страницу вниз и нажимаю на компонент ввода, появляется всплывающее окно, но с определенным смещением по отношению к полю ввода. Следующие скриншоты иллюстрируют проблему.

Проблема с календарем первичных лиц в диалоговом компоненте

Проблема с календарем первичных лиц в диалоговом компоненте

Вот мой код:

<p:dialog id = "dialog"
          widgetVar = "dialog"
          modal = "true">
    <p:panel id = "panel">
        <p:outputPanel id = "outputPanel">
            <p:panelGrid columns = "2" layout = "grid"
                         columnClasses = "ui-grid-col-3, ui-grid-col-4"
                         styleClass = "ui-noborder" width = "100%">
                <p:outputLabel for = "date" value = "#{msg.date}"/>
                <p:calendar id = "date" value = "#{date}"
                            navigator = "true" mask = "true" pattern = "dd/MM/yyyy"/>
            </p:panelGrid>
        </p:outputPanel>
    </p:panel>
....
</p:dialog>

Я не очень хорошо разбираюсь в CSS, поэтому, надеюсь, это легко исправить, но, к сожалению, я не могу понять это сам.

Какую версию PrimeFaces вы используете?

Jasper de Vries 21.02.2019 15:17

К сожалению, забыл добавить это, спасибо, что указали, что я отредактировал свой вопрос и добавил версию. Я использую версию 6.2 (тема омега)

JDVB 21.02.2019 19:16

Я столкнулся с той же проблемой на PF6.0. Я обнаружил проблему это, и похоже, что ребята из PF запланировали исправление для PF7.0. Вы случайно не нашли исправление после публикации?

Mitchell Brooks 06.03.2019 15:00

Я не просто оставил его как есть и мог бы просто вообще отказаться от всплывающего календаря в этом конкретном случае. Спасибо за внимание, хотя я планирую перейти на 6.3, как только она будет доступна, мне нужны некоторые дополнительные исправления, которые должны быть включены в эту версию.

JDVB 07.03.2019 15:39
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
5
4
1 458
1

Ответы 1

Эта проблема еще не устранена по состоянию на март 2021 г.

https://github.com/primefaces/primefaces/issues/3868
https://github.com/primefaces/primefaces/issues/5740
https://github.com/primefaces/primefaces/issues/6583

В качестве обходного пути для моего случая я поставил

<p:dialog blockScroll = "true">

убедитесь, что кнопка, вызывающая диалоговое окно,

window.scrollTo(0,0);

Другие вопросы по теме