Question

1。）当我有这个时：

            <div style="float:right; width:68%;">
                <ui:insert name="main_box"/>
            </div>

传递main_box的内容，但用户无法单击下拉框和其中的命令按钮。在浏览器中进行调试也不会显示正在发送的任何请求。

2。）但是，当我删除浮动时：正确的格式如下：

            <div style="width:68%;">
                <ui:insert name="main_box"/>
            </div>

然后用户可以在下拉框和命令按钮上单击。看起来浮动格式化会以某种方式禁用控件。

这是一个完整的最小例子：

1。）facelet new_customer.xhtml：

  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
    <ui:composition template="/WEB-INF/includes/template.xhtml">
        <ui:define name="main_box">
            <h:form id="formId">
                <p:growl id="growl" life="2000" />
                <p:panel header="Create a new customer" />
                <h:panelGrid id="panel" columns="2" border="1" cellpadding="10"
                    cellspacing="1">
                    <p:outputLabel for="kundeTypId" value="Kunde Typ:" />
                    <p:selectOneMenu id="kundeTypId"
                        value="#{newCustomerBean.custmerType}" style="width:150px">
                        <p:ajax event="change" update="@this formId"
                            process="@this formId" />
                        <f:selectItem itemLabel="Kunde auswählen" itemValue=""
                            noSelectionOption="true" />
                        <f:selectItems value="#{newCustomerBean.custmerTypes}" />
                    </p:selectOneMenu>

                    <p:outputLabel id="vornameLabelId" for="vornameId"
                        value="#{newCustomerBean.custmerType eq 'TYP_NATPERS' ? 'Vorname' : 'Name'}"
                        rendered="#{newCustomerBean.custmerType eq 'TYP_NATPERS' or newCustomerBean.custmerType eq 'TYP_FIRMA'}" />
                    <p:inputText id="vornameId" value="#{newCustomerBean.vorname}"
                        rendered="#{newCustomerBean.custmerType eq 'TYP_NATPERS' or newCustomerBean.custmerType eq 'TYP_FIRMA'}"
                        maxlength="25" size="20" />

                </h:panelGrid>
                <p:commandButton type="submit" value="Create Customer"
                    icon="ui-icon-check" action="#{newCustomerBean.saveNewCustomer}" />
            </h:form>
        </ui:define>
    </ui:composition>
</h:body>
</html>

2。）模板template.xhtml：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta charset="UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Alex-Mi example </title> 
</h:head>
<h:body>
    <h:outputStylesheet name="./css/styles.css"  />
    <h:outputScript library="js" name="common.js" />
         <div id="container">
                 <ui:insert name="menu" />
                 <div id="content" class ="content">
                     <div id = "dropzone" style="float:left; width:32%;">
                        <img id="preview" src='../images/library_small.jpg' alt='library'  style="width: 280px; height: 160 px;"/>
                        <select name="top5" id="flist" size="5"></select>
                        <output id="list"></output>
                    </div>
                    <div style="float:right; width:68%;">
                        <ui:insert name="main_box"/>
                    </div>
                    <div id="footer">
                        <p id="usersOnline"></p>
                        <p>Copyright @2017 Alex-Mi</p>
                    </div>
                </div>
         </div>
</h:body>
</html>

3.。）我的CSS文件：

/** footer **/

#footer {
    padding-top: 2em;
    position: relative;
}

#footer p {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica;
}

3。）Backing Bean NewCustomerBean.java：

@ManagedBean
@ViewScoped
public class NewCustomerBean implements Serializable {

    private static final long serialVersionUID = 1L;

    public enum KundeTyp {

        TYP_NATPERS("Nat. Person"), TYP_FIRMA("Firma");

        private String value;

        private KundeTyp(String value) {
            this.value = value;
        }

        @Override
        public String toString() {
            return value;
        }

    }

    private KundeTyp custmerType;
    private Map<String, KundeTyp> custmerTypes;

    private String vorname;

    private String kundeTyp = Integer.MIN_VALUE + "";

    @PostConstruct
    public void init() {
        custmerTypes = new HashMap<String, KundeTyp>();
        custmerTypes.put(KundeTyp.TYP_NATPERS.value, KundeTyp.TYP_NATPERS);
        custmerTypes.put(KundeTyp.TYP_FIRMA.value, KundeTyp.TYP_FIRMA);
    }

    public KundeTyp getCustmerType() {
        return custmerType;
    }

    public void setCustmerType(KundeTyp custmerType) {
        this.custmerType = custmerType;
    }

    public Map<String, KundeTyp> getCustmerTypes() {
        return custmerTypes;
    }

    public void setCustmerTypes(Map<String, KundeTyp> custmerTypes) {
        this.custmerTypes = custmerTypes;
    }

    public String getVorname() {
        return vorname;
    }

    public void setVorname(String vorname) {
        this.vorname = vorname;
    }

    public String getKundeTyp() {
        return kundeTyp;
    }

    public void setKundeTyp(String kundenTyp) {
        this.kundeTyp = kundenTyp;
    }

    public String saveNewCustomer() {

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "OK",
                    "New customer saved " ));

        return null;
    }

}

Answer 1

我找到了解决上述问题的方法，但它仍然没有解释问题是什么以及它在哪里。以下是解决方法：

clear: both;

到css文件：

#footer {
    padding-top: 2em;
    position: relative;
    clear: both; 
}

我可以解释一下该行要做什么：它只是清除浮动：使用id footer格式化div。但我无法解释为什么这会影响我的PrimeFaces下拉列表和命令按钮的行为。有人可以帮帮我吗？

PrimeFaces：格式化<div style =“float：right;”>导致命令按钮不起作用？

1 个答案: