how to move the button to middle in panelGrid column
Posted: 27 May 2016, 03:52
I am use RIO 3.1.1 and primefaces 5.3.
By default, the commandButton in the panelGrid cell align to the top.now I want move it to middle in the cell.
I set the "vertical-align=middle" to the p:column but it have not taked effect. How can I do this?
pls help me!
see image:https://drive.google.com/open?id=0B93nF ... GxYU2Y2ZUU
By default, the commandButton in the panelGrid cell align to the top.now I want move it to middle in the cell.
I set the "vertical-align=middle" to the p:column but it have not taked effect. How can I do this?
pls help me!
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;}
.iconAlign{vertical-align:middle !important;}
</style>
</h:head>
<h:body>
<h:form>
<p:breadCrumb styleClass="Container100 Card ShadowEffect" >
<p:menuitem value="Categories" url="#" />
<p:menuitem value="test" url="#" style="color:#1D67A5;"/>
<p:menuitem value="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('diaEdit').show();" styleClass="BrownButton" icon="fa fa-arrow-circle-up Fs18 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="diaEdit" header="add" responsive="true" modal="true" resizable="false" >
<h:form id="formEdit">
<p:scrollPanel mode="native" style="max-height:500px;" >
<p:panelGrid columns="3" layout="grid" styleClass="ui-panelgrid-blank ui-fluid" columnClasses="ui-grid-col-5.5,ui-grid-col-1,ui-grid-col-5.5">
<p:column styleClass="iconAlign">
<p:panel id="basic2" header="Basic Panel" footer="" style="margin-bottom:20px">
<p:tree id="editLeftTree" value="#{baseMenuDataBean.root}" var="r" style="min-width:200px;min-height:400px;border:0px"
selectionMode="checkbox" selection="#{baseMenuDataBean.selectMenuNodeData}">
<p:treeNode>
<h:outputText value="#{r.cdmc}" />
</p:treeNode>
</p:tree>
</p:panel>
</p:column>
<p:column>
<p:commandButton icon="fa fa-arrow-left Fs18 White"
actionListener="#{baseMenuDataBean.delNewMenuChild}"
>
</p:commandButton>
<p:commandButton icon="fa fa-arrow-right Fs18 White"
actionListener="#{baseMenuDataBean.saveNewMenuChild(baseMenuDataBean.selectMenuNodeData)}"
>
</p:commandButton>
</p:column>
<p:column styleClass="iconAlign">
<p:panel id="basic" header="Basic Panel" footer="" style="margin-bottom:20px">
<p:tree style="min-width:200px;min-height:400px;border:0px" id="editRightTree" value="#{baseMenuDataBean.rootNew}" var="r"
selectionMode="checkbox" selection="#{baseMenuDataBean.newCreateBaseMenu}">
<p:treeNode>
<p:commandLink value="#{r.cdmc}">
</p:commandLink>
</p:treeNode>
</p:tree>
</p:panel>
</p:column>
</p:panelGrid>
</p:scrollPanel>
</h:form>
</p:dialog>
</h:body>
</html>
