Change the width of a primefaces picklist

Question

I want to change the width of my picklist instead of having the default width in primefaces.css I have tried this but it doesn't work.

<h:body>
    <f:facet name="last">
        <h:outputStylesheet library="default" name="mystyle.css" />
    </f:facet>
    <p:pickList ...>
       ...
    </p:picklist>
</h:body>

And in my mystyle.css I've only this:

.ui-picklist .ui-picklist-list{
    width:400px !important;
}

Answer 1

Your CSS is apparently never being loaded. If you have checked the generated HTML output and/or the HTTP traffic monitor, you should have noticed it. The culprit is the <f:facet name="last"> which isn't supported by <h:body>. It's only supported by <h:head> and even then only when PrimeFaces is installed.

This should do:

<h:body>
    <h:outputStylesheet library="default" name="mystyle.css" />

    <p:pickList ...>
       ...
    </p:pickList>
</h:body>

See also:

• How do I override default PrimeFaces CSS with custom styles?