title: p:selectOneMenu Rendering Weird
body: <p>Following the instructions given on the PrimeFaces <a href="https://www.primefaces.org/showcase/getstarted.xhtml" rel="nofollow noreferrer">getting-started page</a>, I am seeing an odd rendering from <code>SelectOneMenu</code>. It doesn't look the way I'd expect. Does anyone know why?</p>
  
  <p><img src="https://i.stack.imgur.com/FcmHy.png" alt="Rendering"></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:p="http://primefaces.org/ui"&gt;
  
     &lt;h:body&gt;
  
        &lt;h:form&gt;
           &lt;p:selectOneMenu id ="selectOneMenuCategorie" value="#{selectOneController.categorieSelected}" &gt;
              &lt;f:selectItem itemLabel="Select One" noSelectionOption="true"/&gt;
              &lt;f:selectItems value="#{selectOneController.categorieList}"
                             var = "c" itemLabel="#{c.libelle}" itemValue="#{c}"/&gt;
              &lt;f:ajax render="selected_item1"/&gt;
           &lt;/p:selectOneMenu&gt;
  
           &lt;h:outputText id="selected_item1" value="#{selectOneController.categorieSelected.libelle}"&gt;&lt;/h:outputText&gt;
  
        &lt;/h:form&gt;
     &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>