Come controllare l'allineamento della DataTable all'interno di un PanelGrid?

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

Domanda

Ho un multi-colonna di messa a punto panelGrid, con DataTable come ciascuna delle colonne. Ciascuno dei DataTables è una lunghezza differente. Il risultato è la panelGrid si estende per adattarsi alla grande dataTable (finora, questo è un bene). I DataTable rimanenti sono centrati verticalmente (questo non è buono come sembra orribile sullo schermo) invece di essere superiore giustificata.

Come faccio a sapere panelGrid ai contenuti top-giustificare? Oppure, è il mio approccio completamente sbagliato e ho bisogno di fare qualcosa di diverso (in tal caso, i suggerimenti sono i benvenuti)?

È stato utile?

Soluzione

JSF rende come HTML e può essere designato con i CSS. Controllare l'elemento nel seguente modo:

  1. Visualizza la pagina JSF in un browser.
  2. Fare clic sulla pagina.
  3. Scegli Visualizza origine .

Il <h:panelGrid> rende un elemento <table> HTML; la <h:dataTable> rende come elemento <table> HTML, pure. Gli elementi di dati sono annidati all'interno dell'elemento <td>, resa dalla <h:panelGrid>. Quindi, impostare la vertical-align del <td> del <h:panelGrid> a top.

Supponendo che il <h:panelGrid> ha un id che finisce come <table id="panelGridId"> in HTML, utilizzare il seguente CSS: 

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

Forme

Se la griglia è parte di un modulo, poi il CSS dovrà includere l'ID del modulo. Ad esempio: 

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

Il CSS sarà simile: 

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

Esempio

Ecco un documento HTML di esempio che mostra l'allineamento verticale di lavoro all'interno di una tabella configurato usando i 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>

Tutti ottenere allineato al top. Senza la regola, tutti get centrato. E 'difficile dire che cosa diranno esattamente regola è necessario applicare in quanto non è chiaro come il tuo look markup generato come.

Esercitazioni

Vedi anche:

Altri suggerimenti

è possibile utilizzare i CSS per rendere i panelgrids in alto align. 

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

}

includere nei vostri file XHTML. 

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

e aggiungere questo codice in panelgrid genitore. 

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

Nota: per 3 colonne si hav includerlo 3 volte

È possibile evitare di applicare a ogni td, solo all'interno panelGrid e dentro DataTable. Ho avuto lo stesso problema e la seguente funzionato per me: 

.pgstyle td{ 
vertical-align: top;
}

Dove pgstyle è lo styleClass si dà ad ogni panelGrid contiene un DataTable, come: 

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top