CODEWITHSUNDEEP
jsf-2primefaces
bittersour
bittersour

Reputation: 1007

p:selectOneMenu list display

I have some problem with p:selectOneMenu. My selectOneMenu will populate a list with grouping. If the list is too long, the list get displayed upwards without any vertical scrollbar. It should display downwards with a vertical scrollbar.

If the selectOneMenu is populated with normal list without grouping, it works fine. List can display with a vertical scrollbar if its too long.

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

Upvotes: 7

Views: 10874

Answers (4)

Pragalathan M
Pragalathan M

Reputation: 1781

The following ensures that if you are using a filter (along with grouping), then the search bar stays at the top and only the items scroll.

    .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;
    }

The Html

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

Upvotes: 1

user6009380
user6009380

Reputation: 31

You can use styleClass="selectOneMenuGrouped" in your selectOneMenu and following in css:

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


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

Upvotes: 3

Marko Jankovic
Marko Jankovic

Reputation: 155

I have managed to get it working using this code (a little modofocation from above):

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

Hope this helps solving your problem.

Upvotes: 2

Rafa Hern&#225;ndez
Rafa Hern&#225;ndez

Reputation: 468

Adjust the height of class "ui-selectonemenu-items-wrapper".

Try this

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

enter image description here

Upvotes: 4

Related Questions