Wyrównanie panelu JSF do góry

Question

Widzę, że opublikowano kilka odpowiedzi na ten temat. wypróbowałem prawie wszystkie z wieloma kombinacjami permutacji .. ale nic nie działa.

Elementy wewnątrz panelu są zawsze wyrównane do środka, zamiast do góry.

Próbowałem cokolwiek powiedzieli w poniższym poście. How to control alignment of DataTable inside of a PanelGrid?

Proszę dać mi znać, jeśli istnieje remedium.

Answer 1

Wykonanie elementu <h:panelGrid> powoduje utworzenie elementu HTML <table>. Pionowe wyrównanie komórki tabeli <td> domyślnie wynosi middle. Zamiast tego chcesz, aby był to top. Jest to łatwe dzięki CSS.

<h:panelGrid styleClass="foo"> 

z

.foo td { 
    vertical-align: top; 
} 

Jeśli masz tabelę wewnątrz panelgrid dla którego chcesz zachować komórkę tabeli domyślnie pionowe wyrównanie pola, to trzeba zmienić CSS, co następuje:

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

tak, że tylko własne komórki table top panelgrid są wyrównane.

Aby dowiedzieć się wszystkiego o CSS, sprawdź http://www.csstutorial.net.

Answer 2

Użyj panelGrid „s columnClasses atrybut zidentyfikować klasę CSS, który zawiera vertical-align: top; styl:

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

oraz plik CSS:

.topAligned { 
    vertical-align: top; 
} 

zawartość pierwszej kolumnie w panelGrid następnie zostaną wyrównane do góry w obrębie ich komórek.

Answer 3

Użyj styleClass dla panelGrid jak w kodzie następującym przykładzie:

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

Następnie w configure css następująco:

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

Dzięki tej metodzie będzie można nie tylko góry - wyrównanie wierszy, ale można również zastosować tę samą klasę styleClass w innych panelGrids w ramach otaczającego elementu panelGrid.

Na przykład:

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