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

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

Вопрос

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

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

Это было полезно?

Решение

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 который заканчивается как <table id="panelGridId"> В HTML используйте следующие CSS:

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

Формы

Если сетка является частью формы, то 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>

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

Учебники

Смотрите также:

Другие советы

Вы можете использовать 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 раза

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

.pgstyle td{ 
vertical-align: top;
}

Где PGStyle. Это стиликласс, который вы даете каждому панелю, содержит DataTable, например:

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top