Comment contrôler l'alignement de l'intérieur DataTable d'un PanelGrid?

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

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)?

Était-ce utile?

La solution

JSF rend HTML et peut être de style CSS. Inspecter l'élément comme suit:

  1. Voir la page JSF dans un navigateur.
  2. clic droit sur la page.
  3. 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top