Liên kết bảng điều khiển JSF lên đầu trang

Question

Tôi thấy có một số câu trả lời được đăng cho điều này. cố gắng gần như tất cả chúng với một số hoán vị kết hợp .. nhưng không có gì có vẻ là làm việc.

các thành phần bên trong panelgris luôn được căn giữa, thay vì trên cùng.

đã thử bất cứ điều gì họ đã nói trong bài đăng bên dưới. How to control alignment of DataTable inside of a PanelGrid?

Vui lòng cho tôi biết nếu có biện pháp khắc phục.

Answer 1

<h:panelGrid> hiển thị phần tử HTML <table>. Căn chỉnh theo chiều dọc của ô bảng <td> mặc định thực sự là middle. Thay vào đó, bạn muốn biến nó thành top. Điều này rất dễ dàng với CSS.

<h:panelGrid styleClass="foo"> 

với

.foo td { 
    vertical-align: top; 
} 

Nếu bạn có một bảng bên trong panelgrid mà bạn muốn giữ các ô trong bảng mặc định dọc liên kết của trung lưu, thì bạn cần phải thay đổi CSS như sau:

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

để chỉ các ô bảng riêng của bảng điều khiển được căn chỉnh trên cùng.

Để tìm hiểu tất cả về CSS, hãy kiểm tra http://www.csstutorial.net.

Answer 2

Sử dụng 's panelGridcolumnClasses thuộc tính để xác định một lớp CSS bao gồm vertical-align: top; phong cách:

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

và file CSS:

.topAligned { 
    vertical-align: top; 
} 

Nội dung của cột đầu tiên trong panelGrid sau đó sẽ được căn chỉnh trên cùng trong các ô của chúng.

Answer 3

Sử dụng styleClass cho panelGrid như trong đoạn mã ví dụ sau:

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

Sau đó, trong cấu hình css như sau:

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

Với phương pháp này, bạn sẽ có thể không chỉ hàng đầu -xác định các hàng nhưng bạn cũng có thể áp dụng cùng một styleClass cho các bảng điều khiển khác trong bảng điều khiển bao gồmGrid.

Ví dụ:

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