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>
用户就可以同时在下拉框和命令按钮上单击。似乎浮点格式会以某种方式禁用控件。
这是一个完整的最小示例：
1.）小面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;
}
}
最佳答案
我发现了上述问题的解决方法，但是仍然无法解释问题的所在和位置。解决方法如下：
clear: both;
到css文件：
#footer {
padding-top: 2em;
position: relative;
clear: both;
}
我可以解释该行应该做什么：它只是清除float：具有id页脚的div的格式。但是我无法解释为什么这会影响我的PrimeFaces下拉列表和命令按钮的行为。有人可以帮我吗？
关于html - PrimeFaces:格式化<div style =“float:right;”>会导致命令按钮不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46627105/