css - IE8 和 Primefaces p :selectOneMenu misbehave when having a lots of p:selectOneMenu in a form

Question

首先，我想为我发布的长代码道歉，它们非常简单，只是一个重复 17 次的 p:selectOneMenu(这就是为什么它很长)。 我遇到的问题是，如果我在一个表单中有太多 p:selectOneMenu，selectOneMenu 会出错，当用户点击它时不会下拉(除非我垃圾点击 selectOneMenu)，列表不会下拉。非常奇怪的是，如果它只有 1 或 2 个 selectOneMenu 那么它工作正常(这就是为什么我发布显示 17 下拉列表的代码)。这只发生在 IE8 中。这个工作很好是 IE6,7 FF, Chrome。

再次:对长代码表示歉意

编辑 1:我只是编辑我的代码以将更多条目添加到 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 时它工作正常我的脑子出来了。这是我的文档类型

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

Answer 1

我也遇到了同样的问题。在 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。

希望尽快修复。