So kontrollieren Sie die Ausrichtung der DataTable innerhalb eines PanelGrid?

Ich habe eine multi-Spalte panelGrid setup, mit dataTables als jede der Spalten. Jede der Datentabellen ist eine andere Länge. Dies führt in der panelGrid aus stretching, um fit die größte dataTable (so weit, dass das gut ist). Die restlichen dataTables sind vertikal zentriert (dies ist nicht gut, wie es aussieht schrecklich auf dem Bildschirm) anstatt oben gerechtfertigt.

Wie kann ich sagen panelGrid zu top-begründen Inhalte? Oder ist mein Ansatz völlig falsch und ich muss etwas anders machen (wenn ja, Vorschläge sind willkommen)?

InformationsquelleAutor Brian Knoblauch | 2010-08-23
  1. 8

    JSF rendert HTML, und kann gestylt mit CSS. Überprüfen Sie das element wie folgt:

    1. Ansicht der JSF-Seite im browser.
    2. Der rechten Maustaste auf die Seite.
    3. Wählen Sie View Source.

    Den <h:panelGrid> rendert ein HTML - <table> element; die <h:dataTable> gerendert als HTML - <table> element. Die Datenelemente verschachtelt sind, innerhalb der <td> element, gerendert von der <h:panelGrid>. Also, legen Sie die vertical-align des <td> des <h:panelGrid> zu top.

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

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

    Formen

    Wenn das raster ist Teil eines Formulars ist, dann das CSS benötigen, um die form-ID. Zum Beispiel:

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

    CSS Aussehen:

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

    Beispiel

    Hier ein Beispiel für ein HTML-Dokument, die zeigt, dass die vertikale Ausrichtung in einer Tabelle konfiguriert mit 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>

    Alle ausgerichtet nach oben. Ohne die Regel, alles zentriert zu bekommen. Es ist schwer zu sagen, welche Regel exacty, die Sie anwenden müssen, da es unklar ist, wie sich Ihre generierten markup Aussehen.

    Tutorials

    Siehe auch:

    • OK, habe es funktioniert. Ich landete kleben die <style> - element direkt in den head-Bereich meiner xhtml Datei, und verwenden Sie die Ausrichtung für alle td-Elemente. Nicht bekommen es überhaupt zu arbeiten, wenn in unserer CSS-Datei (trotz anderer Dinge, die kommen gut durch, wie Farben). Auch nicht in der Lage, Sie zu beschränken, um nur die bestimmten td-Elemente, die es benötigt. Zum Glück in diesem Fall, es ist sicher für alle td auf der Seite. Ich danke Ihnen sehr für Ihre Hilfe! Das war ein extrem Frustrierendes problem!
    InformationsquelleAutor BalusC
  2. 6

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

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

}

    gehören in den xhtml-Dateien.

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

    und fügen Sie diesen code in übergeordneten panelgrid.

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

    Hinweis:für 3 Spalten, die Sie hav enthalten es 3 mal

    InformationsquelleAutor Alok
  3. 1

    Können Sie vermeiden, die Anwendung, um alle td, die nur innerhalb panelGrid-und datatable-innen, die.
    Ich hatte das gleiche problem und Folgendes bei mir funktioniert:

    .pgstyle td{ 
vertical-align: top;
}

    Wo pgstyle wird die styleClass Sie zu jeder panelGrid enthält eine Datentabelle, wie:

    <h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
    InformationsquelleAutor TiyebM
Schreibe einen Kommentar