How to Align Items in a <H:Panelgrid> to the Right

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.

How to right align h:panelGrid?

Try this out, there was a typing mistake in your coding as well, its the first h:panelGrid 's column you have typed "columnus"

Inside <h:head> the style sheet must be declared.

<h:head>
<h:outputStylesheet name="styles.css"
        library="css" />
</h:head>

then in <h:body>

<h:body> 
<h:panelGrid columns="2" width="600">
        <h:panelGroup>
            <h:panelGrid columns="2" columnClasses="alignmentLeft" width="200">
                <h:outputLink>...1 </h:outputLink>
                <h:outputLink>...2 </h:outputLink>
            </h:panelGrid>
        </h:panelGroup>
        <h:panelGroup>
            <h:panelGrid columns="2" columnClasses="alignmentRight" width="200">
                <h:outputLink>...3 </h:outputLink>
                <h:outputLink>...4 </h:outputLink>
            </h:panelGrid>
        </h:panelGroup>
    </h:panelGrid>
</h:body>

In style sheet (styles.css) the styles are,

.alignmentLeft {
 text-align : left;
 border: 1px solid black;
 background-color: orange;
}
.alignmentRight {
 text-align : right;
 border: 1px solid black;
 background-color: lime;
}

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>

Align elements inside h:panelGrid without CSS

The solution is quite simple. I added to panelGrid property style="width:100%; text-align: right". And left text-align:left/right on panelGroups.

How to align h:panelGrid itself NOT items in a center?

Provided that it has a known width, give it a left and right margin of auto. This way it will center itself relative to the parent block element.

<h:panelGrid ... style="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>

Right aligning panelGrid nested inside another

Reason why your buttons displayed on left side is: outer table has 1 column and data in each table cell is displayed on left side (until other is defined). It means your inner table with all content will be displayed on left side in relevant cell of outer table. rightAlign style is setup for inner table columns and not reflected to outer table. If you want to display buttons on right side, you should change flow in cell, where button table is sitting. In following code style was added:

<h:panelGrid id="containerGrid" columns="1" cellpadding="10" width="100%">
    <h:outputText id="commentIntro" value="Some text..." />
    <h:outputLabel for="comment" value="Comment:"/>
    <h:inputTextarea id="comment" title="Comment" value="comment..." />
    <h:panelGrid id="nestedGrid" columns="2" cellpadding="10" style="float: right;">
        <h:commandButton id="submit" value="Submit" />
        <h:commandButton id="cancel" value="Cancel" />
    </h:panelGrid>
</h:panelGrid>

As result buttons are displayed on right side.

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;
}

---

Related Topics