Как контролировать выравнивание DataTable внутри PanelGrid? - PullRequest
Новая
       9

Как контролировать выравнивание DataTable внутри PanelGrid?

8 голосов
/ 23 августа 2010

У меня есть многоколоночная установка PanelGrid, с таблицами данных в качестве каждого из столбцов.Каждый из таблиц данных имеет разную длину.Это приводит к тому, что панель Grid растягивается, чтобы соответствовать самой большой таблице данных (пока это хорошо).Остальные таблицы данных располагаются по центру по вертикали (это нехорошо, так как выглядит ужасно на экране) вместо выравнивания по верхнему краю.

Как я могу указать panelGrid для выравнивания по верху содержимого?Или мой подход совершенно неправильный, и мне нужно сделать что-то другое (если да, предложения приветствуются)?

Ответы [ 3 ]

8 голосов
/ 23 августа 2010

JSF отображается как HTML и может быть стилизован с помощью CSS.Проверьте элемент следующим образом:

  1. Просмотр страницы JSF в браузере.
  2. Щелкните правой кнопкой мыши страницу.
  3. Выберите Просмотр источника .

<h:panelGrid> отображает элемент HTML <table>;<h:dataTable> также отображается как элемент HTML <table>.Элементы данных вложены в элемент <td>, представленный <h:panelGrid>.Итак, установите vertical-align из <td> <h:panelGrid> в top.

Предполагая, что <h:panelGrid> имеет id, который заканчивается в HTML как <table id="panelGridId">, используйтеследующий CSS: 

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

Forms

Если сетка является частью формы, то CSS должен будет включать идентификатор формы.Например: 

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

CSS будет выглядеть следующим образом: 

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

Пример

Вот пример HTML-документа, который показывает вертикальное выравнивание, работающее в таблице, настроенной с помощью 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>

Все выровнены сверху.Без правила все центрируется.Трудно сказать, какое именно правило вы должны применять, поскольку неясно, как выглядит сгенерированная разметка.

Учебники

См. Также:

6 голосов
/ 22 октября 2012

Вы можете использовать CSS для выравнивания сетки панелей сверху. 

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

}

включите в свои файлы xhtml. 

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

и добавьте этот код в родительскую панель панелей. 

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

Примечание: для 3 столбцов необходимо включить его 3 раза

1 голос
/ 09 марта 2015

Вы можете избежать применения его к каждому тд, только внутри panelGrid и датировать внутри него.У меня была та же проблема, и у меня сработало следующее: 

.pgstyle td{ 
vertical-align: top;
}

Где pgstyle - это styleClass, который вы даете каждой панели, Grid содержит таблицу данных, например: 

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...