IE8 e Primefaces p: selectOneMenu si comportano male quando si ha un sacco di p: selectOneMenu in un modulo

Question

Prima di tutto, voglio scusarmi per il lungo codice che pubblico, sono molto semplici, è solo un p:selectOneMenu che si ripete 17 volte (questo perché è lungo). Il problema che ho riscontrato è che se ho un numero eccessivo di p:selectOneMenu in un modulo, lo selectOneMenu non ha accesso e non scenderà quando l'utente fa clic su di esso (a meno che non faccia clic sullo selectOneMenu), l'elenco non verrà visualizzato. Ciò che è molto bizzarro è che se è solo 1 o 2 selectOneMenu allora funziona bene (questo è il motivo per cui pubblico il codice che mostra 17 elenco a discesa). Questo succede solo in IE8. Questo funziona bene è IE6,7 FF, Chrome.

Ancora una volta: scusa per il codice lungo

Edit1: Ho appena modificare il mio codice per aggiungere altre voci al foodList al mio bean gestito. Questo è fondamentale in al fine di replicare i miei problemi

<div id="MainWrapper"> 
    <h:form id="myForm" styleClass="mainForm"> 
     <h:panelGrid columns="2" columnClasses="columnStyle,columnStyle"> 
      <h:panelGrid columns="3"> 
       Select Food1: 
       <p:selectOneMenu id="food1" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood1"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood1" for="food1"/> 

       Select Food2: 
       <p:selectOneMenu id="food2" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood2"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood" for="food2"/> 

       Select Food3: 
       <p:selectOneMenu id="food3" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood3"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood3" for="food3"/> 

       Select Food4: 
       <p:selectOneMenu id="food4" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood4"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood4" for="food4"/> 

       Select Food5: 
       <p:selectOneMenu id="food5" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood5"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood5" for="food5"/> 

       Select Food6: 
       <p:selectOneMenu id="food6" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood6"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood6" for="food6"/> 

       Select Food7: 
       <p:selectOneMenu id="food7" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood7"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood7" for="food7"/> 

       Select Food8: 
       <p:selectOneMenu id="food8" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood8"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood8" for="food8"/> 

       Select Food9: 
       <p:selectOneMenu id="food9" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood9"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood9" for="food9"/> 

       Select Food10: 
       <p:selectOneMenu id="food10" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood10"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood10" for="food10"/> 

       Select Food11: 
       <p:selectOneMenu id="food11" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood11"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood11" for="food11"/> 

       Select Food12: 
       <p:selectOneMenu id="food12" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood12"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood12" for="food12"/> 

       Select Food13: 
       <p:selectOneMenu id="food13" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood13"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood13" for="food13"/> 

       Select Food14: 
       <p:selectOneMenu id="food14" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood14"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood14" for="food14"/> 

       Select Food15: 
       <p:selectOneMenu id="food15" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood15"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood15" for="food15"/> 

       Select Food16: 
       <p:selectOneMenu id="food16" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood16"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood16" for="food16"/> 

       Select Food17: 
       <p:selectOneMenu id="food17" required="true" value="#{viewBean.selectedFood}" 
            styleClass="dropdown-width"> 
        <f:selectItem itemLabel="Select One" itemValue=""/> 
        <f:selectItems value="#{viewBean.foodList}"/> 
        <p:ajax update=":myForm:errorFood17"/> 
       </p:selectOneMenu> 
       <p:message id="errorFood17" for="food17"/> 
      </h:panelGrid> 
      There is supposed to be another table here 
     </h:panelGrid> 
     <p:commandButton value="submit" update="myForm"/> 
    </h:form> 
</div> 

Managed Bean

@ManagedBean 
@ViewScoped 
public class ViewBean implements Serializable { 

    private List<String> foodList; 
    private String selectedFood; 

    public ViewBean() { 
    } 

    @PostConstruct 
    public void init() { 

     foodList = new ArrayList<String>(); 
     foodList.add("Pizza"); 
     foodList.add("Pasta"); 
     foodList.add("Hamburger"); 
     foodList.add("Hot Dog"); 
     foodList.add("Spring Roll"); 
     foodList.add("Grill Fish"); 
     foodList.add("Chips"); 
     foodList.add("Ramen"); 
    } 
    //setter, getter 
} 

Ecco il mio CSS.

body{ 
    background-color: #EBEAE3; 
    font-family: Trebuchet; 
    margin: 0; 
} 

#MainWrapper{ 
    margin: 0 auto; 
    width: 1100px; 
    background-color: white; 
} 

.columnStyle{ 
    vertical-align: top; 
} 

.mainForm{ 
    margin-left: 68px; 
} 

.dropdown-width{ 
    width: 400px; 
} 

.ui-widget { 
    font-family: Arial,sans-serif; 
    font-size: 0.8em; 
} 

td .ui-selectonemenu { 
    display:block; 
} 

Ho speso un sacco di tempo debug questo, ma il fatto che esso bug fuori quando ci sono molti selectOneMenu e funzionano bene quando ci sono 1 o 2 selectOneMenu solo cremagliera mio cervello fuori. Qui è il mio tipo di documento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Answer 1

abbiamo anche questo problema in IE7, richiede un tripleclick per ottenere l'elenco a discesa per essere mostrato. incredibile soluzione aehh workarround: inserire un

<p:confirmDialog> 
</p:confirmDialog> 

nel sito, in cui è stato utilizzato selectOneMenu :-) Funziona.

Answer 2

Ho lo stesso problema. Testato su primefaces 3.0.RC1 e 3.1 a 2.1.3 Mojarra (FCS b02)

non ho trovato una soluzione, ma ho trovato 3 soluzioni:

1) modificare il layout in modo menu di scorrimento non sono finite a vicenda (o su altri componenti)

2) Aggiungi IE 7 Compatibilità come tag alla tua pagina. La seguente affermazione deve essere sopra il tag. (Perché deve essere la prima meta tag)

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

3) Assicurarsi di mostrare sempre una barra di scorrimento verticale. Per fare questo si può aggiungere quanto segue al foglio di stile CSS3:

body { 
    overflow-y: scroll; 
} 

O CSS2:

body { 
    overflow: scroll; 
} 

Trovo strano come alcune di queste soluzioni funziona, ma lo fanno. Io stesso sono andato per l'opzione 3.

Spero che presto ci sarà una soluzione.