Comment contrôler l'alignement de l'intérieur DataTable d'un PanelGrid?
Question
J'ai une configuration panelGrid à plusieurs colonnes, avec datatables que chacune des colonnes. Chacun des datatables est une longueur différente. Cela se traduit par l'panelGrid tendant à adapter le plus grand dataTable (jusqu'à présent, ce qui est bon). Les datatables restants sont centrés verticalement (ce n'est pas bon car il semble horrible à l'écran) au lieu d'être en haut justifié.
Comment puis-je dire panelGrid au contenu haut justifier? Ou, est mon approche tout à fait tort et que je dois faire quelque chose de différent (le cas échéant, les suggestions sont les bienvenus)?
La solution
JSF rend HTML et peut être de style CSS. Inspecter l'élément comme suit:
- Voir la page JSF dans un navigateur.
- clic droit sur la page.
- Choisissez Afficher la source .
Le <h:panelGrid>
rend un élément de <table>
HTML; le <h:dataTable>
rend comme un élément <table>
HTML, ainsi. Les éléments de données sont imbriqués à l'intérieur de l'élément de <td>
rendu par le <h:panelGrid>
. Alors, réglez le vertical-align
du <td>
du <h:panelGrid>
à top
.
En supposant que le <h:panelGrid>
a une id
qui finit comme <table id="panelGridId">
en HTML, utilisez le CSS suivant:
#panelGridId>tbody>tr>td {
vertical-align: top;
}
Formulaires
Si la grille fait partie d'une forme, le CSS devra inclure l'ID du formulaire. Par exemple:
<form id="amazingForm">
<h:panelGrid id="amazingGrid">
...
</h:panelGrid>
</form>
Le CSS ressemblera à:
#amazingForm\:amazingGrid > tbody > tr > td {
vertical-align: top;
}
Exemple
Voici un document HTML exemple qui montre l'alignement vertical de travail dans une table configuré à l'aide 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>
Tous s'alignés en haut. Sans la règle, tout se centrer. Il est difficile de dire quelle règle exacty vous devez appliquer car il ne sait pas comment votre look de balisage généré comme.
Tutoriels
Voir aussi:
Autres conseils
vous pouvez utiliser les CSS pour rendre les panelgrids en haut align.
.mystyle {
vertical-align: top;
horizontal-align: center;
}
inclure dans vos fichiers xhtml.
<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>
et ajoutez ce code dans panelgrid parent.
<h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">
Note: 3 colonnes VHA pour l'inclure 3 fois
Vous pouvez éviter l'appliquer à chaque td, et seulement à l'intérieur panelGrid datatable intérieur qui. J'ai eu le même problème et ce qui suit a fonctionné pour moi:
.pgstyle td{
vertical-align: top;
}
Où pgstyle est le styleClass que vous donnez à chaque panelGrid contient une datatable, comme:
<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
....
</rich:dataTable>
</h:panelGrid>