IE8 and Primefaces p:selectOneMenu misbehave when having a lots of p:selectOneMenu in a form
First of all, I want to apologize for the long code I post, they are very simple, it is just a p:selectOneMenu that repeat 17 times (that why it is long). The problem that I experience is that if I have too many p:selectOneMenu in a form, the selectOneMenu bugged out and wont drop down when the user click on it (unless I spam click on the selectOneMenu), the list will not drop down. What is very bizarre is that if it is only 1 or 2 selectOneMenu then it work fine (this is why I post code that display 17 drop down list). This only happen in IE8. This work fine is IE6,7 FF, Chrome.
Once again: apologize for the long code
EDIT1: I just edit my code to add more entries to foodList to my managed bean. This is crucial in in order to replicate my issues
<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
}
Here is my 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;
}
I have spent lots of time debugging this, but the fact that it bug out when there are many selectOneMenu and work fine when there are 1 or 2 selectOneMenu just rack my brain out.
Here is my doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Answer
I have the same problem. Tested on Primefaces 3.0.RC1 and 3.1 on Mojarra 2.1.3 (FCS b02)
I did not find a solution, but I did found 3 workarounds:
1) Change your layout so the dropdowns are not over each other (or over other components)
2) Add IE 7 Compatibility to as a tag to your page. The following statement has to be above you tag. (because it must be the first meta tag)
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
3) Be sure to always show a vertical scrollbar. To do this you can add the following to your CSS3 stylesheet:
body {
overflow-y: scroll;
}
Or CSS2:
body {
overflow: scroll;
}
I find it strange how some of these workarounds work, but they do. I myself went for option 3.
I hope there will be a fix soon.