In this page,just only first button can show the dialog,the other tow button can't show it dialog,but when I removed the "layout=grid" in three button,it correct.That why?
I doubt it,please help me?
In my project,I create a page code like this:
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui" template="/temple/temple.xhtml">
<h:head>
<title>info</title>
<h:outputStylesheet name="css/core-layout.css" library="rio-layout" />
<h:outputStylesheet name="css/animate.css" library="rio-layout" />
<h:outputStylesheet name="css/rio-font.css" library="rio-layout" />
<h:outputStylesheet name="css/ripple-effect.css" library="rio-layout" />
<h:outputStylesheet name="css/perfect-scrollbar.css" library="rio-layout" />
<h:outputStylesheet name="css/font-awesome.css" library="rio-layout" />
<h:outputStylesheet name="css/rio-layout.css" library="rio-layout" />
<style>
.ui-panelgrid-cell{padding:2px 2px !important;}
.ui-button-text{white-space:nowrap !important;}
.ui-datatable-odd{background-color: #eef2f7 !important;}
.ui-datatable-even{background-color:#ffffff !important;}
</style>
</h:head>
<h:body>
<h:form>
<p:breadCrumb styleClass="Container100 Card ShadowEffect" >
<p:menuitem value="Categories" url="#" />
<p:menuitem value="info" url="#" style="color:#1D67A5;"/>
<p:menuitem value="some info" url="#" style="color:#1D67A5;"/>
</p:breadCrumb>
</h:form>
<div class="Container100 ui-fluid Responsive100 Card ShadowEffect" style="margin-top:10px">
<h:form id="list">
<p:panelGrid columns="20" layout="grid" styleClass="ui-panelgrid-blank" columnClasses="ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-10,ui-grid-col-2,ui-grid-col-2">
<p:commandButton value="add" onclick="PF('adddlg').show();" styleClass="BrownButton" icon="fa fa-arrow-circle-up Fs18 White"></p:commandButton>
<p:commandButton value="start" onclick="PF('editdlg').show();" styleClass="GreenButton" icon="fa fa-play Fs16 White"></p:commandButton>
<p:commandButton value="disable" onclick="PF('infodlg').show();" styleClass="redButton" icon="fa fa-play Fs16 White"></p:commandButton>
<p:outputLabel></p:outputLabel>
<p:outputLabel></p:outputLabel>
<p:outputLabel></p:outputLabel>
</p:panelGrid>
<p:growl id="msg" showDetail="true"></p:growl>
</h:form>
</div>
<p:dialog widgetVar="adddlg" header="add" modal="true" responsive="true" resizable="false">
<h:form id="add" >
<p:scrollPanel mode="native" style="max-height:500px">
<p:panelGrid layout="grid" columns="4" styleClass="ui-panelgrid-blank ui-fluid" columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4">
<p:outputLabel value="bbbb"></p:outputLabel><p:inputText value="11"></p:inputText>
<p:outputLabel value="bbbb"></p:outputLabel><p:inputText value="22"></p:inputText>
<p:outputLabel value="bbbb"></p:outputLabel><p:inputText value="33"></p:inputText>
</p:panelGrid>
</p:scrollPanel>
<p:panelGrid style="margin-top:10px" columns="6" layout="grid" styleClass="ui-panelgrid-blank ui-fluid" columnClasses="ui-grid-col-2,ui-grid-col-2,ui-grid-col-3,ui-grid-col-3,ui-grid-col-2,ui-grid-col-2">
<p:outputLabel></p:outputLabel>
<p:outputLabel></p:outputLabel>
<p:commandButton value="save" onclick="PF('adddlg').hide();" icon="fa fa-check Fs16 White" styleClass="RaisedButton"></p:commandButton>
<p:commandButton oncomplete="PF('adddlg').hide();" value="cancle" styleClass="RedButton RaisedButton" icon="fa fa-close Fs16 White" />
<p:outputLabel></p:outputLabel>
<p:outputLabel></p:outputLabel>
</p:panelGrid>
</h:form>
</p:dialog>
<p:dialog widgetVar="editdlg" header="modify" modal="true" responsive="true" resizable="false">
<h:form id="edit">
<p:scrollPanel mode="native" style="max-height:500px">
<p:panelGrid layout="grid" columns="4" styleClass="ui-panelgrid-blank ui-fluid" columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4">
<p:outputLabel value="aaaa"></p:outputLabel><p:inputText value="cc"></p:inputText>
<p:outputLabel value="ffff"></p:outputLabel><p:inputText value="dd"></p:inputText>
<p:outputLabel value="ffff"></p:outputLabel><p:inputText value="ee"></p:inputText>
<p:outputLabel value="ffff"></p:outputLabel>
</p:panelGrid>
</p:scrollPanel>
<p:panelGrid style="margin-top:10px" columns="6" layout="grid" styleClass="ui-panelgrid-blank ui-fluid" columnClasses="ui-grid-col-2,ui-grid-col-2,ui-grid-col-3,ui-grid-col-3,ui-grid-col-2,ui-grid-col-2">
<p:outputLabel></p:outputLabel>
<p:outputLabel></p:outputLabel>
<p:commandButton value="save" action="#{xxgl.save}" onclick="PF('editdlg').hide();" icon="fa fa-check Fs16 White" styleClass="RaisedButton"></p:commandButton>
<p:commandButton oncomplete="PF('editdlg').hide();" value="cancle" styleClass="RedButton RaisedButton" icon="fa fa-close Fs16 White" />
<p:outputLabel></p:outputLabel>
<p:outputLabel></p:outputLabel>
</p:panelGrid>
</h:form>
</p:dialog>
<p:dialog widgetVar="infodlg" header="eeee" modal="true" responsive="true" resizable="false" >
<h:form id="info">
<p:scrollPanel mode="native" style="max-height:500px" >
<p:panelGrid layout="grid" columns="4" styleClass="ui-panelgrid-blank ui-fluid" columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" >
<p:outputLabel value="aaaa" ></p:outputLabel><p:outputLabel value="aa"></p:outputLabel>
<p:outputLabel value="aaaa"></p:outputLabel><p:outputLabel value="bb"></p:outputLabel>
<p:outputLabel value="aaaa"></p:outputLabel><p:outputLabel value="aa"></p:outputLabel>
<p:outputLabel value="aaaa"></p:outputLabel><p:outputLabel value="bb"></p:outputLabel>
</p:panelGrid>
</p:scrollPanel>
</h:form>
</p:dialog>
</h:body>
</html>