堆棧內存溢出
  簡體   English   中英

IE8和Primefaces p：selectOneMenu在表單中有很多p：selectOneMenu時行為不端

[英]IE8 and Primefaces p:selectOneMenu misbehave when having a lots of p:selectOneMenu in a form

 原文  2012-01-13 20:17:53  8   2    css/ internet-explorer/ jsf/ primefaces/ selectonemenu

問題描述

首先，我想為我發布的長代碼道歉，它們非常簡單，它只是一個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">

2 個解決方案

解決方案1
 6  2012-02-09 13:44:07

我也有同樣的問題。 在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。

我希望很快就會有解決方案。

解決方案2
 4  2012-01-26 08:48:34

我們在IE7中也有這個問題，它需要一個tripleclick才能顯示下拉列表。 令人難以置信的解決方案aehh workarround：插入一個 

<p:confirmDialog> 
</p:confirmDialog>

在網站，使用selectOneMenu :-)它的工作原理。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 PrimeFaces p:selectOneMenu 寬度 在p panelgrid中顯示selectonemenu primefaces時的錯誤 更改p：selectOneMenu的樣式 CSS p：selectOneMenu 改變寬度<p:selectOneMenu> p：selectOneMenu輪廓嵌套在p：panel中時會獲得額外的空間 在IE 8上被“ display：inline-block”環繞時，p：selectOneMenu錯誤 p：selectOneMenu列表無法正確顯示 調整瀏覽器大小時，具有相對寬度的p：selectOneMenu會伸展 如何在p：selectOneMenu中對齊組件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM