7

我对 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;
}
4

4 回答 4

4

调整类“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>

在此处输入图像描述

于 2014-03-04T12:10:24.137 回答
3

您可以styleClass="selectOneMenuGrouped"在您的selectOneMenu和以下中使用css：

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


 .selectOneMenuGrouped .ui-selectonemenu-items-wrapper
 {
       height:100% !important;
       overflow: scroll;
 }
于 2016-03-02T18:03:48.013 回答
2

我已经设法使用此代码使其工作（上面的一些 modofocation）：

<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>

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

于 2015-02-26T23:01:34.087 回答
1

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

    .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>
于 2016-04-02T08:37:12.467 回答