Календарь Primefaces не меняет свое положение при повороте окна

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

Вот пример:

  1. Моя веб-страница отображается в портретном режиме. Я щелкнул значок календаря, и положение всплывающего окна хорошее: Календарь Primefaces не меняет свое положение при повороте окна

(обратите внимание на css с левой стороной: 719,406 пикселей, рассчитанной по праймерам). Пока все в порядке.

  1. Теперь я поворачиваюсь в ландшафтный режим: Календарь Primefaces не меняет свое положение при повороте окна

Обратите внимание, что всплывающее окно больше не находится рядом со значком календаря. Кроме того, css утверждает, что при одинаковом левом значении.

  1. Чтобы сделать это правильно, мне нужно щелкнуть в любом месте экрана, чтобы закрыть всплывающее окно, а затем снова щелкнуть значок календаря:

Календарь Primefaces не меняет свое положение при повороте окна

Положение теперь хорошее, с другим и правильным значением слева: 1061,91px.

Как я могу заставить простые лица автоматически перенастраивать css без необходимости каждый раз дважды щелкать?

Решение, найденное для меня до сих пор, заключалось в том, чтобы добавить пользовательское значение для выравнивания по правому краю с экраном и переопределить левое:

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

Но приведенное выше решение очень специфично для этого экрана, и, к счастью, у меня всегда есть кнопка календаря в правой части экрана, поэтому я всегда могу предположить, что 10 пикселей справа будут выглядеть нормально.

Я также заметил, что ui-datepicker-div является дочерним элементом элемента body, поэтому я не могу связать его с кнопкой с помощью css.

Любые идеи/помощь общего решения будут высоко оценены. Версия Primefaces: 6.2

Я думаю, что это должно быть частью базового компонента javascript, а не конкретно PrimeFaces. Он использует внешний компонент javascript для работы с календарем. Вы можете посмотреть в источнике PrimeFaces, который это (может быть, «старый» jquery-календарь или что-то более новое, что неясно, поскольку вы не опубликовали информацию о версии, ни минимальный воспроизводимый пример. Что касается добавления его в тело, это обычное решение чтобы предотвратить другие проблемы. Вы можете проверить, есть ли у компонента «appendTo», который может помочь в этом случае, но может привести к другим проблемам, связанным с размещением, сокрытием (z-index) и т. д.

Kukeltje 21.02.2019 10:22

Извините, забыл добавить версию PF (6.2, сейчас тоже добавил в пост).

actunderdc 21.02.2019 10:29
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в 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. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
5
2
1 150
1

Ответы 1

Эта проблема исправлена ​​в Primefaces 7.0.RC3. Он был выпущен неделю назад. https://mvnrepository.com/artifact/org.primefaces/primefaces/7.0.RC3

Можете объяснить, как эта проблема была устранена? мне так интересно, спасибо

thang 21.02.2019 16:28

Primefaces обновил код JQuery, который теперь меняет положение всплывающей панели календаря при изменении размера окна.

actunderdc 22.02.2019 07:54

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