how to move the button to middle in panelGrid column

Locked
bacon88
Posts: 67
Joined: 29 Aug 2012, 08:36
Location: SiChuang,China

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!

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>

see image:https://drive.google.com/open?id=0B93nF ... GxYU2Y2ZUU
jdk1.8.0_202 & Java EE 8
primefaces 8.0
Mojarra 2.3.9
GlassFish Server 5.1.0

bacon88
Posts: 67
Joined: 29 Aug 2012, 08:36
Location: SiChuang,China

02 Jun 2016, 11:24

:roll:
jdk1.8.0_202 & Java EE 8
primefaces 8.0
Mojarra 2.3.9
GlassFish Server 5.1.0

mert.sincan
Posts: 4352
Joined: 29 Jun 2013, 12:38

03 Jun 2016, 14:03

Please try;

Code: Select all

//CSS
.myPanelGrid .ui-grid-responsive .ui-panelgrid-cell {
      display: table-cell;
}
            
.myPanelGrid .ui-grid-responsive .ui-panelgrid-cell.middleButtons {
      vertical-align: middle;
      float: none;
}
            
.myPanelGrid .middleButtons > button {
      margin-bottom: 5px;
}

//XHTML
<p:panelGrid columns="3" layout="grid" styleClass="ui-panelgrid-blank ui-fluid myPanelGrid"  columnClasses="ui-grid-col-5.5,ui-grid-col-1 middleButtons,ui-grid-col-5.5">
   ...
   <p:column>
          <p:commandButton  icon="fa fa-arrow-left Fs18 White" />
          <p:commandButton icon="fa fa-arrow-right Fs18 White" />
   </p:column>
   ...
</p:panelGrid>

Locked

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest