Cómo controlar la alineación del interior de un DataTable panelGrid?

StackOverflow https://stackoverflow.com/questions/3547485

Pregunta

Tengo una configuración de varias columnas panelGrid, con tablas de datos como cada una de las columnas. Cada una de las tablas de datos es una longitud diferente. Esto resulta en la panelGrid estirando para adaptarse a la mayor dataTable (hasta ahora, eso es bueno). Las tablas de datos restantes están centradas verticalmente (esto no es bueno, ya que se ve horrible en la pantalla) en lugar de ser superior justificado.

¿Cómo puedo saber panelGrid arriba-justificar contenidos? O bien, es mi enfoque totalmente equivocado y tengo que hacer algo diferente (si es así, se admiten sugerencias)?

¿Fue útil?

Solución

JSF renderiza como HTML y puede ser de estilo con CSS. Inspeccionar el elemento como sigue:

  1. Ver la página JSF en un navegador.
  2. Haga clic en la página.
  3. Selecciona Ver código .

El <h:panelGrid> hace que un elemento <table> HTML; la <h:dataTable> hace como un elemento <table> HTML, también. Los elementos de datos están anidados dentro del elemento <td>, dictada por el <h:panelGrid>. Por lo tanto, establecer el vertical-align del <td> del <h:panelGrid> a top.

Si se asume que el <h:panelGrid> tiene una id que termina como <table id="panelGridId"> en HTML, utilice el siguiente CSS: 

#panelGridId>tbody>tr>td { 
    vertical-align: top;
}

Formas

Si la red es parte de un formulario, entonces la CSS tendrá que incluir el ID del formulario. Por ejemplo: 

<form id="amazingForm">
  <h:panelGrid id="amazingGrid">
    ...
  </h:panelGrid>
</form>

El CSS se parecerá a: 

#amazingForm\:amazingGrid > tbody > tr > td {
  vertical-align: top;
}

Ejemplo

Aquí hay un documento HTML de ejemplo que muestra la alineación vertical de trabajo dentro de una tabla configurada usando CSS: 

<!-- language: html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3547485</title>
        <style>#myid>tbody>tr>td { vertical-align: top; }</style>
    </head>
    <body>
        <table id="myid">
            <tbody>
                <tr>
                    <td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Todo conseguir alineado arriba. Sin la regla, todos nos centrado. Es difícil saber lo que exacty regla es necesario aplicar, ya que no está claro cómo su mirada marcado generado similares.

Tutoriales

Ver también:

Otros consejos

Puede usar CSS para hacer las panelgrids arriba align. 

.mystyle {
vertical-align: top;
horizontal-align: center;

}

incluir en sus archivos XHTML. 

<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>

y añadir este código en panelGrid padres. 

 <h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">

Nota: para 3 columnas que HAV a incluirlo 3 veces

Se puede evitar la aplicación a todos los td, sólo en el interior y en el interior panelGrid tabla de datos que. Yo tenía el mismo problema y la siguiente trabajó para mí: 

.pgstyle td{ 
vertical-align: top;
}

Donde pgstyle es el styleClass le da a cada panelGrid contiene una tabla de datos, como: 

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top