Выравнивание панели панели JSF

Я вижу, что для этого есть несколько ответов. почти все они пытались переделать комбинацию.. но ничего не работает.

компоненты внутри panelgris всегда выровнены по середине, а не сверху.

попробовал все, что они сказали в нижнем столбце. Как управлять выравниванием DataTable внутри PanelGrid?

Пожалуйста, дайте мне знать, есть ли лекарство.

Ответ 1

<h:panelGrid> отображает элемент HTML <table>. Вертикальное выравнивание ячейки таблицы <td> по умолчанию действительно равно middle. Вы хотите сделать его top. Это легко с CSS.

<h:panelGrid styleClass="foo">

.foo td {
    vertical-align: top;
}

Если у вас есть таблица внутри панели панели, для которой вы хотите сохранить вертикальное выравнивание ячейки таблицы по умолчанию в середине, тогда вам нужно изменить CSS следующим образом:

.foo>tbody>tr>td {
    vertical-align: top;
}

так что только собственные ячейки панели панели выравниваются по высоте.

Чтобы узнать все о CSS, отметьте http://www.csstutorial.net.

Ответ 2

Используйте атрибут panelGrid columnClasses для определения класса CSS, который включает стиль vertical-align: top;:

<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>

и файл CSS:

.topAligned {
    vertical-align: top;
}

Содержимое первого столбца в панели Grid затем будет выровнено по верхности в пределах их ячеек.

Ответ 3

Используйте styleClass для панелиGrid, как в следующем примере кода:

<h:panelGrid columns="2"  styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5"> 
    <p:outputLabel value="#{resources['IDNumber']}" />
    <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>

Затем в css настройте следующим образом:

.top-aligned-columns td{
    vertical-align: top;
}

С помощью этого метода вы сможете не только выровнять строки, но также вы можете применить один и тот же класс styleClass к другим панелямGrid в охватывающей панелиGrid.

Например:

   <h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
        <p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
            <h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
            <p:outputLabel value="#{resources['IDNumber']}" />
            <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}"  >
                <p:ajax event="change" process="@this" update="tvQuickScore"/>
            </p:inputText>
            <p:outputLabel value="#{resources['Name']}" />
            <p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
            <p:outputLabel value="#{resources['Surname']}" />
            <p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
        </h:panelGrid>
    </p:panel>  
</h:panelGrid>
</p:panel>