Question

我在p:outputLabel中有一个p:caroussel，它应该显示其右侧边框以匹配caroussel，即在400px x 200px帧的外部：

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:panelGroup style="width: 400px; float: left;" layout="block">
        <p:carousel>
        <p:outputLabel value="No preview available" style="width: 100%; height: 200px; display: block;"/>
        </p:carousel>
        </h:panelGroup>
    </h:body>
</html>

显示50px x 200px的无法解释的边框周围的边框：

MVCE https://github.com/krichter722/jsf-width-and-height-on-outputlabel。

我使用的是Primefaces 6.0。

Answer 1

解决方案非常简单。不要试图使用CSS来破解它，而是将numVisible属性设置为1上的p:carousel。

这对我有用：

<h:panelGroup style="width: 400px; float: left;" layout="block">
  <p:carousel numVisible="1" itemStyle="height: 200px;">
    <h:outputText value="No preview available"/>
  </p:carousel>
</h:panelGroup>

另请注意，您可以使用itemStyle来设置项目的高度（如果您需要固定的高度）。

...不要介意光标; - ）

如何制作一个p：carousel项目适合旋转木马的宽度和高度？

1 个答案: