P: selectOneMenu list display

I have a problem with p: selectOneMenu. My selectOneMenu will populate the list with a grouping. If the list is too long, the list is displayed up without a vertical scroll bar. It should display down with a vertical scrollbar.

If selectOneMenu is populated with a regular list without grouping, it works fine. The list may display with a vertical scroll bar if it is 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; } 
+6
source share
4 answers

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

try it

 <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

+4
source

You can use styleClass="selectOneMenuGrouped" in your selectOneMenu and follow 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; } 
+3
source

I managed to get it to work using this code (small modification on top):

 <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 solve your problem.

+2
source

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

  .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> 
+1
source

Source: https://habr.com/ru/post/952434/


All Articles