Primefaces - p:carousel 在 Chrome 和 Internet Explorer 中完全崩溃答案

【问题标题】：Primefaces - p:carousel completely broken in both Chrome and Internet ExplorerPrimefaces - p:carousel 在 Chrome 和 Internet Explorer 中完全崩溃
【发布时间】：2014-07-02 05:48:16
【问题描述】：

我正在尝试在我的页面中实现 p:carousel。

然而，它完全坏了。

我在 Tomcat 7.0.52 上运行 Primefaces 5 和 JSF2.2，我在 Chrome 和 Internet Explorer 8 中都试过了。

我尝试从 Primefaces 5.0 降级到 4.0，但没有任何区别。将其包裹在 <f:view contentType="text/html"> 中也没有。

让我感到困惑的是，primefaces 官方网站上的示例运行良好。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>title</title>
    </h:head>

    <body>
        <p:carousel >
            <p:graphicImage value="/images/cloudy.png" />
            <p:graphicImage value="/images/rainy.png" />
            <p:graphicImage value="/images/logo.gif" />
            <p:graphicImage value="/images/redball.png" />
            <p:graphicImage value="/images/yellowball.png" />
            <p:graphicImage value="/images/greenball.png" />
        </p:carousel>
    </body>
</html>

不完全是火箭科学吧？

更新：

显然，问题在于并非我的所有图像都具有相同的大小。具体来说，除了 logo.gif 是 300x111 之外，它们都是 48x48。移动图像以便logo.gif 是第一个似乎已经修复了它：现在轮播将 300x111 作为每个组件的大小并相应地调整形状。为图像提供固定尺寸也可以。

我现在的问题是另一个问题：我正在使用轮播来显示没有固定大小 (<p:chart>) 的组件，它再次中断。如果我将它们包装在 <p:panel> 中并给面板一个固定大小，它会再次工作，但是固定大小是丑陋且不可接受的（它破坏了应用程序的整个样式）。

有没有办法解决这个问题？

【问题讨论】：

标签： jsf primefaces carousel jsf-2.2

【解决方案1】：

我最终解决了它。事实证明，p:carousel 的元素需要固定宽度。

通过手动将其设置为 400 像素宽和 400 像素高，它再次开始工作。

我认为标签的属性是“itemStyle”（如果您想使用类，则为“itemStyleClass”），但我不是 100% 确定（这是很久以前的事了）。

只是想我会分享解决方案，以防其他人遇到同样的问题。

【讨论】：

请说明您（仍在）使用的 PF 版本。如果是 5.0，它可能已经在 较新的 5.1 或 5.2 中修复

【解决方案2】：

试试这个：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>title</title>
    </h:head>
    <h:body>
        <p:carousel >
            <p:graphicImage value="/images/cloudy.png" />
            <p:graphicImage value="/images/rainy.png" />
            <p:graphicImage value="/images/logo.gif" />
            <p:graphicImage value="/images/redball.png" />
            <p:graphicImage value="/images/yellowball.png" />
            <p:graphicImage value="/images/greenball.png" />
        </p:carousel>
    </h:body>
</html>

我认识到如果您使用 <body> 而不是 <h:body>，PrimeFaces 5.0 将无法正常工作。还要确保<p:graphicImage> 的value 属性指向正确的目录。

【讨论】：

我试过了，但不幸的是它似乎根本没有任何区别。我正在用我的新发现更新原始帖子。