JSF panelgrid對齊頂部

我看到這裏有一些答案。幾乎所有人都嘗試了幾種排列組合......但似乎沒有任何工作。JSF panelgrid對齊頂部

面板內部的組件總是中間對齊，而不是頂部。

嘗試了他們在下面的帖子中所說的話。 How to control alignment of DataTable inside of a PanelGrid?

請讓我知道是否有補救措施。

2011-07-26 user644745

什麼CSS你試過嗎？生成的標記是什麼？你有[SSCCE]（http://sscce.org）嗎？ –

<h:panelGrid>呈現HTML <table>元素。表格單元格<td>的垂直對齊的默認值實際上爲middle。您想改爲使用top。 CSS使用起來很簡單。

<h:panelGrid styleClass="foo">

與

.foo td { 
    vertical-align: top; 
}

如果你有panelGrid中一個表裏面，你想爲其保持默認的表單元格中間垂直對齊，那麼你需要改變CSS如下：

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

這樣只有panelgrid自己的表格單元格是頂部對齊的。

要了解關於CSS的全部信息，請檢查http://www.csstutorial.net。

來源

2011-07-26 19:13:36 BalusC

Hi BalusC，謝謝。我會做，並會更新你。 – user644745

嗨，我添加了如下代碼，嘗試了你提到的兩個選項，但仍然無法使它工作。的我在做什麼錯誤？ panelgrid中有2個primefaces面板，如下所示。 – user644745

使用panelGrid的columnClasses屬性來標識一個CSS類，包含vertical-align: top;風格：

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

和CSS文件：

.topAligned { 
    vertical-align: top; 
}

在panelGrid中的第一列的內容然後將在其細胞內進行頂部對齊。

來源

2012-05-31 21:19:57

使用的styleClass的panelGrid中如下面的示例代碼：

<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應用於包含panelGrid中的其他panelGrid。

例如：

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

來源

2013-06-07 04:47:01 user2462171

JSF panelgrid對齊頂部

回答

相關問題