p:selectOneMenu 列表显示答案

【问题标题】：p:selectOneMenu list displayp:selectOneMenu 列表显示
【发布时间】：2013-08-27 16:08:29
【问题描述】：

我对 p:selectOneMenu 有一些问题。我的 selectOneMenu 将使用分组填充列表。如果列表太长，列表会向上显示而没有任何垂直滚动条。它应该用垂直滚动条向下显示。

如果 selectOneMenu 填充了没有分组的普通列表，它可以正常工作。如果列表太长，可以显示垂直滚动条。

<p:selectOneMenu id="abcd_combo_box_ctpy2" styleClass="selectOneMenu">
    <f:selectItems value="#{pc_Abcd.carList2}" ></f:selectItems>
</p:selectOneMenu>

public List getCarList2() {

    List cars;

    SelectItemGroup g1 = new SelectItemGroup("German Cars");
    g1.setSelectItems(new SelectItem[] { 
            new SelectItem("BMW", "BMW"),
            new SelectItem("Mercedes", "Mercedes"),
            new SelectItem("Volkswagen", "Volkswagen"), 
            new SelectItem("Item 1", "Item 1"), 
            new SelectItem("Item 2", "Item 2"), 
            new SelectItem("Item 3", "Item 3"), 
            new SelectItem("Item 4", "Item 4"), 
            new SelectItem("Item 5", "Item 5"), 
            new SelectItem("Item 6", "Item 6"), 
            new SelectItem("Item 7", "Item 7"), 
            new SelectItem("Item 8", "Item 8"), 
            new SelectItem("Item 9", "Item 9"), 
            new SelectItem("Item 10", "Item 10"), 

    });

    SelectItemGroup g2 = new SelectItemGroup("American Cars");
    g2.setSelectItems(new SelectItem[] {
            new SelectItem("Chrysler", "Chrysler"),
            new SelectItem("GM", "GM"), 
            new SelectItem("Ford", "Ford"),
            new SelectItem("Item 21", "Item 21"), 
            new SelectItem("Item 22", "Item 22"), 
            new SelectItem("Item 23", "Item 23"), 
            new SelectItem("Item 24", "Item 24"), 
            new SelectItem("Item 25", "Item 25"), 
            new SelectItem("Item 26", "Item 26"), 
            new SelectItem("Item 27", "Item 27"), 
            new SelectItem("Item 28", "Item 28"), 
    });

    cars = new ArrayList();
    cars.add(g1);
    cars.add(g2);

    return cars;
}

【问题讨论】：

看起来像 PF 问题：-S
天哪。有什么解决方法吗？我一直在尝试谷歌寻找解决方法，但没有得到任何东西。
我一直在查看PF elite 次要版本修复，似乎他们还没有修复这个..
解决这类问题并不总是那么容易。无论如何，我会注册一个问题：code.google.com/p/primefaces/issues/list 迟早，问题可能会得到解决。
感谢在这里注册。 code.google.com/p/primefaces/issues/…

标签： jsf-2 primefaces

【解决方案1】：

调整“ui-selectonemenu-items-wrapper”类的高度。

试试这个

<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
       xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
    <style>

 .ui-selectonemenu-list,
 .ui-selectonemenu-panel,
 .ui-widget-content 
 {
  height:50% !important
   }


 .ui-selectonemenu-items-wrapper
 {
  height:100% !important
   }


</style>
    </h:head>

    <h:body>
<p:selectOneMenu id="abcd_combo_box_ctpy2" styleClass="selectOneMenu" >
    <f:selectItems value="#{pc_Abcd.carList2}" ></f:selectItems>
</p:selectOneMenu>
    </h:body>
</html>

【讨论】：

我希望高度是自动的。我试过了。它不太好用。我不想指定固定高度的原因是因为有时 selectOneMenu 中的项目可能只有 3 个，如果我设置为 200px，它看起来不太好。
我修改了代码。再试一次。使用这种样式，列表调整高度 50% 空间
这是做什么的...？

【解决方案2】：

您可以在selectOneMenu 中使用styleClass="selectOneMenuGrouped"，并在css 中关注：

.selectOneMenuGrouped.ui-selectonemenu-list, .ui-selectonemenu-panel
 {
       max-height:50% !important;
       overflow: scroll; 
}


 .selectOneMenuGrouped .ui-selectonemenu-items-wrapper
 {
       height:100% !important;
       overflow: scroll;
 }

【讨论】：

【解决方案3】：

我已经设法使用这段代码让它工作了（上面的一点修改）：

<style type="text/css">
   .ui-selectonemenu-list,
   .ui-selectonemenu-panel
   {
       max-height:50% !important;
       overflow: scroll;
   }
   .ui-selectonemenu-items-wrapper
   {
       height:100% !important;
       overflow: scroll;
   }
</style>

希望这有助于解决您的问题。

【讨论】：

【解决方案4】：

以下确保如果您使用过滤器（以及分组），则搜索栏保持在顶部，并且只有项目滚动。

    .ui-selectonemenu-list,
    .ui-selectonemenu-panel
    {
        max-height:50% !important;
        overflow: auto;
    }
    .ui-selectonemenu-items-wrapper
    {

        overflow: auto !important;
    }
    .ui-selectonemenu-list {
        height:300px !important;
        overflow: scroll;
    }

HTML

      <p:selectOneMenu value="#{permissionController.selectedEntity}"
                             filter="true" filterMatchMode="contains"
                             styleClass="selectOneMenu"
                             >
                <f:selectItem itemLabel="Select" itemValue="" />
                <f:selectItems value="#{permissionController.entities}"/>
            </p:selectOneMenu>

【讨论】：