Menu
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;
}
380
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>
183
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;
}
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
