IE8 и Primefaces p: selectOneMenu плохо себя ведут при большом количестве p: selectOneMenu в форме - PullRequest
Новая
       44

IE8 и Primefaces p: selectOneMenu плохо себя ведут при большом количестве p: selectOneMenu в форме

5 голосов
/ 14 января 2012

Прежде всего, я хочу извиниться за длинный код, который я публикую, они очень просты, это просто p:selectOneMenu, которые повторяются 17 раз (вот почему он длинный). Проблема, с которой я сталкиваюсь, заключается в том, что, если у меня слишком много p:selectOneMenu в форме, selectOneMenu выдается из строя и не выпадает, когда пользователь нажимает на нее (если я не спамую нажимаю на selectOneMenu) , список не выпадет. Что очень странно, так это то, что если он всего 1 или 2 selectOneMenu, он работает нормально (вот почему я публикую код, отображающий 17 выпадающих списков). Это происходит только в IE8. Это прекрасно работает IE6,7 FF, Chrome.

Еще раз: прошу прощения за длинный код

РЕДАКТИРОВАТЬ1: я просто редактирую свой код, чтобы добавить дополнительные записи в foodList моего управляемого компонента. Это важно для того, чтобы повторить мои проблемы 

<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>

Управляемый Боб 

@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 

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

Ответы [ 2 ]

6 голосов
/ 09 февраля 2012

У меня такая же проблема. Протестировано на Primefaces 3.0.RC1 и 3.1 на Моджарре 2.1.3 (FCS b02)

Я не нашел решения, но нашел 3 обходных пути:

1) Измените свой макет, чтобы раскрывающиеся списки не перекрывали друг друга (или другие компоненты)

2) Добавьте IE 7 Compatibility в качестве тега на свою страницу. Следующее утверждение должно быть над вами тегом. (потому что это должен быть первый метатег) 

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

3) Обязательно всегда показывайте вертикальную полосу прокрутки. Для этого вы можете добавить в таблицу стилей CSS3 следующее: 

body {
    overflow-y: scroll;
}

Или CSS2: 

body {
    overflow: scroll;
}

Мне странно, как работают некоторые из этих обходных путей, но они работают. Я сам выбрал вариант 3.

Я надеюсь, что скоро будет исправление.

4 голосов
/ 26 января 2012

у нас также есть эта проблема в IE7, требуется тройной щелчок, чтобы получить раскрывающийся список.невероятное решение aehh обходной путь: вставьте 

<p:confirmDialog> 
</p:confirmDialog>

на сайт, где использовался selectOneMenu :-) Это работает.

...