Question

In my facelet, I have one selectOneMenu where I want to apply filter. Filter is working as expected. The only problem is that the width of the filter is not matching the parent.

Below is what I did in my facelet:

<p:selectOneMenu id="state" filter="true"
    filterMatchMode="startsWith" 
    value="#{manageEmployeeInfoBean.selectedState}">
        <f:selectItem itemLabel="Select One" itemValue=""
             noSelectionOption="true" />
        <f:selectItems
             value="#{manageEmployeeInfoBean.availableStates}"
             var="aState" itemLabel="#{aState}"
             itemValue="#{aState}" />
</p:selectOneMenu>

Here is the screenshot:

screenshot

As you can see, it looks very odd. How to set the width of the filter as per the parent one?

Was it helpful?

Solution

Add this in your css file

.ui-selectonemenu-filter-container {
    width: 98% !important;
}

or 100% if you don't want any padding

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top