Блог

Главная - Вопросы по программированию - Лайтбокс PrimeFaces JSF показывает элементы в сетке и модальные слишком маленькие

Лайтбокс PrimeFaces JSF показывает элементы в сетке и модальные слишком маленькие

#html #css #jsf #primefaces #java-ee-7

#HTML #css #jsf #primefaces #java-ee-7

Вопрос:

Окружающая среда:

JBoss EAP: 7.2.0
Версия PrimeFaces: 8.0
Тестовые браузеры: Chrome 85.0 и Edge 85.0

Проблема — lightBox элементы в сетке:

Я внедряю лайтбОкс PrimeFaces на основе документации и демонстрации здесь: https://www.primefaces.org/showcase/ui/overlay/lightBox.xhtml

Я ожидаю lightBox , что будет отображаться одно изображение, и при нажатии открывается модель, которая позволяет прокручивать другие изображения в большем модальном. Однако мой лайтбОкс показывает отдельные элементы в вертикальной сетке! Смотрите скриншот:

введите описание изображения здесь

Вот мой код для p:lightBox :

 .lightbox-link {
  width: 300px;
  height: 300px;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/example-bg.png');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.rrsp-image-data-300px {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/example-bg.png');
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    align-items: center;
}  
 <!-- [START]: Supply Image        -->
<div class="lightbox-link w-inline-block w-lightbox">

  <p:lightBox id="lbxSupplyDetailImage">

    <h:outputLink value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" title="#{controllerSupplies.clsSelectedSupply.sSupplyName}">
      <h:graphicImage value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" styleClass="rrsp-image-data-300px" alt="#{controllerSupplies.clsSelectedSupply.sSupplyName}" />
    </h:outputLink>

    <h:outputLink value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" title="#{controllerSupplies.clsSelectedSupply.sSupplyName}">
      <h:graphicImage value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" styleClass="rrsp-image-data-300px" alt="#{controllerSupplies.clsSelectedSupply.sSupplyName}" />
    </h:outputLink>

    <h:outputLink value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" title="#{controllerSupplies.clsSelectedSupply.sSupplyName}">
      <h:graphicImage value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" styleClass="rrsp-image-data-300px" alt="#{controllerSupplies.clsSelectedSupply.sSupplyName}" />
    </h:outputLink>

  </p:lightBox>

</div>
<!-- [END]: Supply Image        -->

Проблема — lightBox модальный слишком маленький:

Кроме того, когда я нажимаю на p:lightBox элемент, чтобы открыть полное изображение, оно показывает очень маленький модальный размер, но изображение имеет размер 800×600 пикселей! Вот скриншот:

введите описание изображения здесь

Почему я сталкиваюсь с этими двумя проблемами? Что я мог упустить?

Примечание: я нахожусь на начальных этапах изучения Java EE и JSF.

Комментарии:

1. проверьте, какую тему PF вы используете. Я рекомендую использовать nova-light тему, которая является той же темой CSS, которую использует PF showcase. Также попробуйте сначала удалить свой пользовательский CSS и заставить его работать без него.