css - justificar - Cómo alinear elementos en a<h: panelGrid> a la derecha

como se alinea a la derecha en html

Question

¿Cómo alinearía todo en mi abajo a la extrema derecha?

<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

El <h:panelGrid> representa una tabla HTML. Básicamente, desea aplicar text-align: right; en cada elemento <td> que rinde. Con el código actual, lo más fácil sería aplicar lo siguiente:

#authenticate table td {
    text-align: right;
}

Por supuesto, también puede ser más específico, por ejemplo, dando a <h:panelGrid> su propia styleClass y definir una regla en CSS (que se aplicaría directamente en el elemento HTML <table> ).

<h:panelGrid styleClass="className">

con

.className td {
    text-align: right;
}

También puede otorgar a cada elemento <td> su propia clase mediante el atributo columnClasses que acepta una cadena columnClasses por columnClasses nombres de clase CSS que se aplicarán repetidamente en los elementos <td> . Si desea aplicar la misma clase en cada elemento <td> , simplemente especifíquelo una vez:

<h:panelGrid columnClasses="className">

con

.className {
    text-align: right;
}

Como una sugerencia adicional: haga clic con el botón derecho en la página web en navegador web y elija Ver origen , entonces comprenderá mejor lo que exactamente genera JSF.

Answer 2

de hecho en la misma forma que usé <p:panel> y obtuve un buen resultado. parece ;

<p:panel  styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
    <p:commandButton value="Add New Tab"
            actionListener="#{xxx.createNewTab}" process="@this"
            update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
            </p:panel>

Answer 3

Un poco tarde, pero podría ayudar a alguien, ya que era lo que necesitaba ...

Si la alineación no está limitada a esta tabla específica, sino al formato predeterminado para todas las celdas de la tabla, simplemente agréguela a su archivo CSS:

td {
    text-align: right;
}

Luego, todos los elementos <td> , incluidos los generados por JSF, se formatearán de esa manera.