css - How to align items in a <h:panelGrid> to the right

Question

How would I align everything in my below to the far right?

<div id="container">    
     <h:form id="authenticate">
        <h:panelGrid columns="5" cellpadding="6">
             <h:inputText id="email" value="" />
             <p:watermark for="email" value="Email"/>
             <h:inputSecret id="password" value="" />
             <p:watermark for="password" value="Password"/>
             <p:commandButton id="login" value="Login" align="right"/>
        </h:panelGrid>
     </h:form>
</div>

Answer 1

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.