p:galleria 底部没有褪色，就像 PrimeFaces 展示页面上的情况一样

Question

我在 WildFly 16、JSF 2.3 上使用 PrimeFaces 7.0。（我也尝试使用 PrimeFaces 6.2- 但没有任何改变）。

我使用 p:galleria 标签如下：

    <p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
    <p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>

以上功能按预期工作，但所选图片当前不会在底部淡出，画廊的其余图片显示在底部 - 请参见此处：

可能是什么原因，我该如何解决？

我的最小工作示例似乎与我使用的图像大小有关（至少，它看起来是这样的。）:

https://github.com/alexmivonwien/pf.gall.git

在我的案例和 primeface galleria showcase 的案例中比较生成的 HTML 和 CSS 后，我发现了以下差异：

1.) 我自己生成的 HTML 和 CSS:

请注意 "ul" 元素下的第一个 "li" 子元素

<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">

有CSS风格（这里没有display:none）：

<li class="ui-galleria-panel" style="width: 500px; height: 313px;">

2.) primefaces 展示柜中的 HTML 和 CSS：

注意"ul"元素下的第一个"li"元素

<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">

有css风格（这里有一个display:none）：

<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">

Answer 1

可以在 PrimeFaces 展示柜中重现这一点的唯一方法是为图像指定一个明确的高度。例如。通过像 img {height: 364px} 这样的浏览器开发工具添加 css 规则可以实现这一点。这使得大图像无法完全显示缩略图中的内容，它在右侧被截断了。这也可以在您的屏幕转储中看到。在缩略图中，右侧的水槽比在大图中更明显。因此，这 100% 确定是由某些 css 调整图像大小或与 p:galeria

中的 ttge 尺寸相比图像的错误方面引起的

但是，在您问题的代码中看不到真正的技术原因。下一次，总是创建一个 [mcve]，通过减少越来越多，直到你留下一小段（完整的、可验证的、可执行的）代码来证明问题, 或 您找到了解决方案...

实际上这个问题完全是 css html 相关的，与 PrimeFaces 无关。

p:galleria 底部没有褪色，就像 PrimeFaces 展示页面上的情况一样

p:galleria is not faded at the bottom, as is the case on the PrimeFaces showcase page

jsf

primefaces