[英]IE8 and Primefaces p:selectOneMenu misbehave when having a lots of p:selectOneMenu in a form
首先,我想为我发布的长代码道歉,它们非常简单,它只是一个p:selectOneMenu
重复17次(这就是为什么它很长)。 我遇到的问题是,如果我在表单中有太多的p:selectOneMenu
,那么当用户点击它时, selectOneMenu
出现问题并且不会下拉(除非我点击了selectOneMenu
) ,列表不会下拉。 非常离奇的是,如果它只有1或2个selectOneMenu
那么它工作正常(这就是我发布显示17下拉列表的代码的原因)。 这只发生在IE8中。 这项工作很好的是IE6,7 FF,Chrome。
再一次:为长代码道歉
EDIT1:我只是编辑我的代码,将更多条目添加到foodList
到我的托管bean。 这对于复制我的问题至关重要
<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>
管理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
}
这是我的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;
}
我已经花了很多时间来调试这个,但是当有很多selectOneMenu
并且当有1或2个selectOneMenu
工作正常时,它就会selectOneMenu
。 这是我的doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我也有同样的问题。 在Mojarra 2.1.3(FCS b02)上测试Primefaces 3.0.RC1和3.1
我没有找到解决方案,但我找到了3个解决方法:
1)更改布局,使下拉列表不会相互叠加(或通过其他组件)
2)将IE 7兼容性添加为页面标记。 以下声明必须高于您的标记。 (因为它必须是第一个元标记)
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
3)务必始终显示垂直滚动条。 为此,您可以将以下内容添加到CSS3样式表中:
body {
overflow-y: scroll;
}
或者CSS2:
body {
overflow: scroll;
}
我觉得奇怪的是,这些变通办法中的一些是如何工作的,但确实如此。 我自己去了选项3。
我希望很快就会有解决方案。
我们在IE7中也有这个问题,它需要一个tripleclick才能显示下拉列表。 令人难以置信的解决方案aehh workarround:插入一个
<p:confirmDialog>
</p:confirmDialog>
在网站,使用selectOneMenu :-)它的工作原理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.