How to align PanelGrid to center? JSF-Primefaces
The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.
.panelGridCenter {
margin: 0 auto;
}
See also:
- Center a div in CSS
Align nested h:panelGrid in center
I don't think you are going about centering a panelGrid the right way. This has been discussed in several other questions on this site. panelGrid renders to a , a block level element. text-lign: center will just center the text in it. You should use margin: 0 auto to adjust the margins.
Look at these answers to help:
How to align PanelGrid to center? JSF-Primefaces
Center a div in CSS - Bad questions, good answer
Edit:
I made a quick project with your page and was able to center all 3 panelGrids:
The code for it is below, (I added 10px top margins instead of 0 to more easily tell the panels apart):
<h:panelGrid id="A" border="1" columns="1" style="margin: 10px auto; width: 100%; ">
<h:panelGrid id="B" border="1" columns="2" style="margin: 10px auto; width: 460px">
<h:panelGrid border="1" columns="1" style="margin: 10px auto;">
<h:inputText style="width: 310px; " ></h:inputText>
</h:panelGrid>
<h:commandButton value="Add"></h:commandButton>
</h:panelGrid>
</h:panelGrid>
How to align contents of p:panel vertical-align to center
<p:panel style="height:500px;position:relative;"/>
<p:panelGrid columns="1" styleClass="centered">
<div class="component-spacing-top"/>
<h:graphicImage alt="#{business.businessName}" value="#{business.logoFullPath}" class="small-panel-image" />
<div class="component-spacing-top"/>
</p:panelGrid>
</p:panel>
height value is randomly given it does not matter, but do not erase position:relative.
.centered {
position: absolute;
height: 100px;
top: 0;
bottom: 0;
margin:auto;
}
For horizontal you should add below rules:
left:50%;margin-left:-100px;width:200px;
Look out, margin-left value is the -1/2 times of width value.
Result:
If width is not fixed you can try this way it works on me and aligns it center horizontally and vertically at same time:
<p:panel style="line-height:200px;padding: 5% 0;position: relative;"/>
<p:panelGrid columns="1" styleClass="centered">
<div class="component-spacing-top"/>
<h:graphicImage style="vertical-align:middle;" alt="#{business.businessName}" value="#{business.logoFullPath}" class="small-panel-image" />
<div class="component-spacing-top"/>
</p:panelGrid>
</p:panel>
Note that graphicImage has style property as well.
.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}
Result:
Even if doesn't work you should check the link that I gave inside about. That was what I am doing there are 6 ways and you should mix them.
- About
- Demo
Right alignment inside a p:column holding a p:panelGrid
Since the panelGrid is a table you can float it to the right:
<p:panelGrid style="width: 25%;">
<p:row>
<p:column>
<p:panelGrid style="float: right">
<p:row>
<p:column>
b
</p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:row>
</p:panelGrid>
How to align items in a h:panelGrid to the right
The <h:panelGrid> renders a HTML table. You basically want to apply text-align: right; on every <td> element it renders. With the current code, easiest would be to apply the following:
#authenticate table td {
text-align: right;
}
You can of course also be more specific, e.g. giving the <h:panelGrid> its own styleClass and defining a rule in CSS (which would be applied directly on the rendered HTML <table> element).
<h:panelGrid styleClass="className">
with
.className td {
text-align: right;
}
You can also give each <td> element its own class by columnClasses attribute which accepts a commaseparated string of CSS classnames which are to be applied repeatedly on the <td> elements. If you want to apply the same class on every <td> element, just specify it once:
<h:panelGrid columnClasses="className">
with
.className {
text-align: right;
}
As an extra hint: rightclick the webpage in webbrowser and choose View Source, then you'll understand better what JSF is all exactly generating.
Aligning content inside panelGrid columns
Based on this answer, you can do like this (I like this approach the most)
<h:panelGrid columnClasses="className">
.className {
vertical-align: top;
}
How to align JSF components to center
Look at the generated HTML output and alter CSS accordingly.
If the HTML element which you'd like to center is a block element (<div>, <p>, <form>, <table>, etc, or forced by display: block;), then you first need to give it a known width and then you can center it relative to its parent block element using CSS margin: 0 auto; on the element itself.
If the HTML element which you'd like to center is an inline element (<span>, <label>, <a>, <img>, etc, or forced by display: inline;), then you can center it using CSS text-align: center; on its parent block element.
Center component on jsf page
Try below code I will hope this answer be your question
<h:form>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="outer_table">
<tr>
<td>
<table width="500" height="300" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<p:panel header="Login">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="username" />
<p:inputText id="username" value="#{loginBean.uname}" required="true" label="username"/>
<h:outputLabel for="password" value="password" />
<p:password id="password" value="#{loginBean.password}" required="true" label="password" />
<p:commandButton value="Login" action="#{loginBean.loginProject}" update=":growl"/>
</h:panelGrid>
</p:panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
css
<script type="text/css">
html, body
{
margin:0px;
padding:0px;
width:100%;
min-height:100%;
height:100%;
}
.outer_table
{
width:100%;
height:100%;
}
</script>
Align p:graphicImage to center inside p:column
After hours of testing, I've come up to a solution.
It appears that in this case the main problem is not how to set alignment in cell (p:column), which can be done in either of the proposed ways (with style="text-align: center;" or with style="margin: 0px auto;").
The main issue here is that p:graphicImage has styleClass="ui-icon ui-icon-...". Without that styleClass (and by using src="..." to specify image source), the cell alignment would be applied without any problems.
If styleClass="ui-icon ui-icon-..." has to be used, then it's needed to specify additional style for p:graphicImage to cope with it, and this style is style="display: block; margin: 0px auto;".
<p:panelGrid id="pgIcons" style="width: 100%;">
<p:row>
<p:column style="width: 50%; text-align: center;">
<p:graphicImage id="gi1" styleClass="ui-icon ui-icon-check"
style="display: block; margin: 0px auto;"/>
</p:column>
<p:column style="width: 50%; margin: 0px auto;">
<p:graphicImage id="gi2" styleClass="ui-icon ui-icon-bookmark"
style="display: block; margin: 0px auto;"/>
</p:column>
</p:row>
</p:panelGrid>
Related Topics
How to Prevent a Flex Item Height to Overflow Due to It's Content
Material-Ui-Next: Setting Image Size to Fit a Container
Bootstrap Center 3 Col-Md-3 Divs
"_Msg_@@Extension_Id_" Doesn't Work and Webfonts Don't Load
Flex: Wrapped Items with Same Width as The Rest
CSS Make Background-Image Use Font Character
Even Flexbox Product Grid with Left Alignment
Animating Svg Fill Linearly Along Length of Path
Why Is This Div's Calculated Height More Than Its Content
React Testing Library (Rtl): Test a Responsive Design
How to Have a Progress Bar Move from Right to Left Based on a Negative Value in Twitter Bootstrap
How to Make Entire Div Change Color on Hover Using CSS
How to Put a List Inside a Span Tag
Multiple HTML Div's Using Same CSS Style
Data-Uri Svg Background in CSS Not Working in Firefox
Primefaces Datatable Selectcheckboxmenu Filter Formatting Issue