导致命令按钮不起作用?-6ren"> 导致命令按钮不起作用?-1.) 当我有这个时: main_box 的内容已传送,但用户既不能单击下拉框,也不能单击其中的命令按钮。在浏览器-6ren">
gpt4 book ai didi

html - PrimeFaces:格式化
导致命令按钮不起作用?

转载 作者:行者123 更新时间:2023-11-28 02:52:02 27 4
gpt4 key购买 nike

1.) 当我有这个时:

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

main_box 的内容已传送,但用户既不能单击下拉框,也不能单击其中的命令按钮。在浏览器中调试也不会显示正在发送任何请求。

2.) 但是,当我像这样删除 float:right 格式时:

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

然后用户可以同时单击下拉框和命令按钮。 float 格式似乎以某种方式禁用了控件。

这是一个完整的最小示例:

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.) 支持 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;
}

}

最佳答案

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

clear: both; 

到css文件:

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

我可以解释该行应该做什么:它只是清除 float :为带有 id 页脚的 div 格式化。但我无法解释为什么这会影响我的 PrimeFaces 下拉列表和命令按钮的行为。有人可以帮助我吗?

关于html - PrimeFaces:格式化 <div 样式 ="float:right;"> 导致命令按钮不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46627105/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com