css - welcome - Alineación de la cuadrícula de JSF a la parte superior

styleclass primefaces example

Question

Veo que hay algunas respuestas publicadas para esto. intenté casi todos ellos con varias combinaciones de permutación ... pero nada parece estar funcionando.

los componentes dentro de panelgris siempre están alineados en el medio, en lugar de arriba.

intenté lo que dijeron en el siguiente mensaje. ¿Cómo controlar la alineación de DataTable dentro de un PanelGrid?

Por favor, avíseme si hay un remedio.

Answer 1

Use el atributo columnClasses para identificar una clase CSS que incluya vertical-align: top; estilo:

<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>

y el archivo CSS:

.topAligned {
    vertical-align: top;
}

El contenido de la primera columna en el panelGrid se alineará en la parte superior dentro de sus celdas.

Answer 2

Use el styleClass para panelGrid como en el siguiente código de ejemplo:

<h:panelGrid columns="2"  styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5"> 
    <p:outputLabel value="#{resources[''IDNumber'']}" />
    <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>

Luego, en el css, configure de la siguiente manera:

.top-aligned-columns td{
    vertical-align: top;
}

Con este método, no solo podrá alinear las filas al máximo, sino que también puede aplicar el mismo estiloClass a otras grillas de panel dentro de la grilla de panel circundante.

Por ejemplo:

   <h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
        <p:panel id="pnlApplicant" header="#{resources[''ApplicantHeader'']}" styleClass="no-border">
            <h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
            <p:outputLabel value="#{resources[''IDNumber'']}" />
            <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}"  >
                <p:ajax event="change" process="@this" update="tvQuickScore"/>
            </p:inputText>
            <p:outputLabel value="#{resources[''Name'']}" />
            <p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
            <p:outputLabel value="#{resources[''Surname'']}" />
            <p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
        </h:panelGrid>
    </p:panel>  
</h:panelGrid>
</p:panel>

Answer 3

The <h:panelGrid> representa un elemento HTML <table> . La alineación vertical de una celda de tabla <td> defecto en middle . Usted quiere hacer que sea top lugar. Esto es fácil con CSS.

<h:panelGrid styleClass="foo">

con

.foo td {
    vertical-align: top;
}

Si tiene una tabla dentro de la cuadrícula de panel para la cual desea mantener la alineación vertical predeterminada de la celda de la tabla del centro, entonces debe modificar la CSS de la siguiente manera:

.foo>tbody>tr>td {
    vertical-align: top;
}

de modo que solo las celdas de la tabla de la cuadrícula de panel estén alineadas en la parte superior.

Para aprender todo sobre CSS, consulte http://www.csstutorial.net .