SelectOneMenu label is "covered"

Question

This is probably a CSS problem, but I cannot understand the reason by myself.

I often found some selectonemenus behaving like the one in picture:

The dropdown field is "covered". Then I click it, select a value and... it starts displaying correctly.

I am using Cupertino theme.

If I analyze the generated source, here's what I find:

<div class="ui-helper-hidden-accessible">
   <input id="carrello:formCarrello:j_idt165_focus" name="carrello:formCarrello:j_idt165_focus" type="text">
</div>

<label id="carrello:formCarrello:j_idt165_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 0px;">
   Seleziona...
</label>

The label has "width:0px;". If I remove it, the menu is displayed correctly.

Good but... I DID NOT add that attribute. Why is Primefaces adding it?

EDIT

The source of the first menu:

<p:selectOneMenu value="#{posController.rigaVendita.codiceIva}" effect="fade" converter="codiceIvaConverter">  
                                <f:selectItem itemLabel="Seleziona..." itemValue="" />  
                                <f:selectItems value="#{posController.codiciIva}" var="ci" itemLabel="#{ci.codice}" itemValue="#{ci}" />  
                            </p:selectOneMenu>  

The same problem in all browser. It isn't a css compatibility issue, the fault is the "0px" width attribute!

Answer 1

Ok I finally found what caused the bug!

I had the same problem with selectOneMenu label. It is because I used the default forward page navigation, that's why in some pages components were working and not in other pages.
Actually it's not working when the url is not matching the page.

Solution : concat view id with "?faces-redirect=true" in action attribute of commandLink or commandButton

This can help:

• http://www.mkyong.com/jsf2/jsf-page-forward-vs-page-redirect/
  
• http://www.mkyong.com/jsf2/implicit-navigation-in-jsf-2-0/
  

The same problem occurred with the PrimeFaces google map component <p:gmap> you need also to use redirection if you want to use it

( And there is another problem: if you are using a template you have to put <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>in the template.xhtml, see (primefaces GMmap inside a dialog not rendering) )

EDIT

And apparently it's OK: PrimeFaces does not support forward based navigations within an ajax request, you need to do redirect instead or set ajax to false. http://primefaces.org/faq.html

Answer 2

I've just had the same problem. I guess it was a bug of primefaces. My solution is to override zero width of that element — just add this code into your CSS file:

.ui-selectonemenu-label{
   width: 100%!important;
}

Answer 3

I had the same problem and the solution consists in over write the css of the selectOneMenu in this case, correspond to two selectors, that are the following:

.ui-selectonemenu .ui-selectonemenu-trigger{
    width: auto !important;
    padding-top: 0.4em;
}

.ui-selectonemenu{
    padding-right: 0px !important;
}

See the image before correction

See the image after correction