Wie Ausrichtung der Datentabelle innerhalb eines PanelGrid zu kontrollieren?

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

Frage

Ich habe eine mehrspaltige panelGrid Setup bekommt, mit Datentabellen als jede der Säulen. Jede der Datentabellen ist eine andere Länge. Daraus ergibt sich die panelGrid ausstreckt den größten Datatable passen (bisher, das ist gut). Die restlichen Datentabellen sind vertikal zentriert (dies ist nicht gut, wie es schrecklich auf dem Bildschirm aussieht) anstelle des Seins oben gerechtfertigt.

Wie kann ich panelGrid nach oben-Inhalte rechtfertigen sagen? Oder ist mein Ansatz völlig falsch und ich brauche etwas anderes zu tun (wenn ja, Vorschläge sind willkommen)?

War es hilfreich?

Lösung

JSF macht als HTML und kann mit CSS gestylt werden. Untersuchen Sie das Element wie folgt:

  1. Auf der JSF-Seite in einem Browser.
  2. Rechtsklick auf die Seite.
  3. Wählen Sie View Source .

Die <h:panelGrid> rendert ein HTML <table> Element; die <h:dataTable> macht als HTML-<table> Element, wie gut. Die Datenelemente sind im Inneren des <td> Element verschachtelt ist, durch die <h:panelGrid> gerendert. So stellen Sie den vertical-align des <td> des <h:panelGrid> zu top.

Unter der Annahme, dass der <h:panelGrid> ein id hat, die in HTML als <table id="panelGridId"> endet, verwenden Sie die folgende CSS: 

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

Formulare

Wenn das Raster Teil eines Formulars ist, dann wird die CSS müssen die Form der ID enthalten. Zum Beispiel: 

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

Die CSS wird folgendermaßen aussehen: 

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

Beispiel

Hier ist ein Beispiel HTML-Dokument, das zeigt die vertikale Ausrichtung innerhalb einer Tabelle arbeitet CSS konfiguriert werden: 

<!-- 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>

Alle nach oben ausgerichtet bekommen. Ohne die Regel zentriert alle get. Es ist schwer zu sagen, was Regel exacty Sie anwenden müssen, da es unklar ist, wie die generierte Markup aussehen.

Tutorien

Siehe auch:

Andere Tipps

Sie können CSS verwenden, um die panelgrids nach oben ausrichten zu machen. 

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

}

Sie in Ihren xhtml-Dateien. 

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

und fügen Sie diesen Code in Mutter panelgrid. 

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

Hinweis: für 3 Spalten Sie hav enthalten sie 3-mal

Sie können vermeiden, dass es zu jedem td Anwendung nur innerhalb panelGrid und Datentabelle im Inneren, dass. Ich hatte das gleiche Problem und die folgenden arbeitete für mich: 

.pgstyle td{ 
vertical-align: top;
}

Wo pgstyle ist die styleclass Sie jeden panelGrid geben eine Datentabelle enthält, wie: 

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top