Come controllare l'allineamento della DataTable all'interno di un PanelGrid?
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)?
Soluzione
JSF rende come HTML e può essere designato con i CSS. Controllare l'elemento nel seguente modo:
- Visualizza la pagina JSF in un browser.
- Fare clic sulla pagina.
- 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>