JSF panelgrid alignment to top

Question

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

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

intentaron lo que dijeron en el siguiente mensaje. How to control alignment of DataTable inside of a PanelGrid?

Háganme saber si hay un remedio.

Answer 1

<h:panelGrid> representa un elemento HTML <table>. La alineación vertical de una celda de tabla <td> se predetermina de hecho a middle. Quiere hacer que sea top en su lugar. Esto es fácil con CSS.

<h:panelGrid styleClass="foo"> 

con

.foo td { 
    vertical-align: top; 
} 

Si usted tiene una mesa dentro del panelGrid para el que desea guardar la celda de la tabla por defecto de alineación de la media vertical, entonces usted necesita para modificar las reglas 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 del panel estén alineadas en la parte superior.

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

Answer 2

Uso del panelGrid 's columnClasses atributo para identificar una clase CSS que incluye el estilo vertical-align: top;:

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

y el archivo CSS:

.topAligned { 
    vertical-align: top; 
} 

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

Answer 3

Usar la styleClass para la panelGrid como en el código siguiente 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> 

A continuación, en Configurar de css de la siguiente manera:

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

Con este método usted será capaz de no sólo la parte superior -alinear las filas, pero también puede aplicar el mismo estiloClass a otras panelGrids dentro de la panelGrid que abarca.

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>