selectOneMenu Does not list correctly

Question

I am trying to put selectOneMenu in my code and I am in trouble. I want to list the months of the year, by clicking to select, it lists the names side by side and not one below the other as it should be.

Follows the code:

<h:form>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" >
    <p:outputLabel for="meses" value="Mês:"/>

        <p:selectOneMenu id="meses" value="#{pesquisaBean.mes}" style="width:150px">
            <f:selectItem itemLabel="Janeiro" itemValue="0"/>
            <f:selectItem itemLabel="Fevereiro" itemValue="1"/>
            <f:selectItem itemLabel="Março" itemValue="2"/>
            <f:selectItem itemLabel="Abril" itemValue="3"/>
            <f:selectItem itemLabel="Maio" itemValue="4"/>
            <f:selectItem itemLabel="Junho" itemValue="5"/>
            <f:selectItem itemLabel="Julho" itemValue="6"/>
            <f:selectItem itemLabel="Agosto" itemValue="7"/>
            <f:selectItem itemLabel="Setembro" itemValue="8"/>
            <f:selectItem itemLabel="Outubro" itemValue="9"/>
            <f:selectItem itemLabel="Novembro" itemValue="10"/>
            <f:selectItem itemLabel="Dezembro" itemValue="11"/>
        </p:selectOneMenu>
    </h:panelGrid>
</h:form>

Answer 1

Since your code is with Primefaces, I don’t remember having a <p:selectOneMenu /> listing the items side by side.

Remember that the listing is done via <div /> with a <ul /> with the items.

What you should do is increase the size of the <div /> and, for each <li />, add the css property float: left;