p:selectcheckboxmenu - customize scrollheight

Question

Is there a way to tell the scrollheight to either be of certain height (say 150) or if there aren't enough items to fill this height - fit content?

Answer 1

If you know how many items fit in the 150 you could use a conditional operator (e.q. 9 items fit, 10 or more need to be scrolled) :

    <p:selectCheckboxMenu id="menu" value="#{bean.selectedValues}" label="Cities" scrollHeight="#{bean.avaiableValues.size() lt 10 ? 0 : 150}"
                          filter="true" filterMatchMode="startsWith" panelStyle="width:250px">
        <f:selectItems value="#{bean.avaiableValues}" />
    </p:selectCheckboxMenu>

If you don't know how many items fit in 150 you need css to do that.

Answer 2

You can use a CSS style class in the panelStyleClass attribute in <p:selectCheckboxMenu> with:

max-height: 150px;
overflow: auto;

Answer 3

Use this below CSS style class with <p:selectCheckboxMenu>.

.checkBoxMenuClass ul {max-height:70px;overflow:auto;}

 <p:selectCheckboxMenu id="menu" styleClass="checkBoxMenuClass" value="#{bean.selectedValues}" filter="true" label="Cities" 
   scrollHeight="#{bean.avaiableValues.size() lt 10 ? 0 : 150}" filterMatchMode="startsWith" panelStyle="width:250px">
     <f:selectItems value="#{bean.avaiableValues}" />
 </p:selectCheckboxMenu>