जेएसएफ पैनलग्रिड संरेखण शीर्ष

Question

मुझे लगता है कि इसके लिए कुछ उत्तर पोस्ट किए गए हैं। कई क्रमपरिवर्तन संयोजन के साथ उनमें से लगभग सभी की कोशिश की .. लेकिन कुछ भी काम नहीं कर रहा है।

पैनलग्रिस के अंदर घटक हमेशा शीर्ष के बजाय मध्य गठबंधन होते हैं।

ने नीचे दी गई पोस्ट में जो भी कहा वह कोशिश की। How to control alignment of DataTable inside of a PanelGrid?

कृपया कोई उपाय होने पर मुझे बताएं।

Answer 1

<h:panelGrid> एक HTML <table> तत्व प्रस्तुत करता है। तालिका कक्ष <td> का लंबवत संरेखण वास्तव में middle पर डिफ़ॉल्ट रूप से डिफ़ॉल्ट होता है। आप इसके बजाय top बनना चाहते हैं। सीएसएस के साथ यह आसान है।

<h:panelGrid styleClass="foo"> 

साथ

.foo td { 
    vertical-align: top; 
} 

आप panelgrid अंदर एक मेज है, तो आप डिफ़ॉल्ट तालिका सेल खड़ी बीच के संरेखण रखना चाहते हैं जिसके लिए, तो आप इस प्रकार सीएसएस को बदलने की जरूरत

:

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

ताकि केवल पैनलग्रिड की स्वयं तालिका कक्ष शीर्ष गठबंधन हो।

सीएसएस के बारे में सभी जानने के लिए, http://www.csstutorial.net देखें।

Answer 2

उपयोग panelGrid के columnClasses विशेषता एक CSS वर्ग कि vertical-align: top; शैली शामिल हैं पहचान करने के लिए:

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

और सीएसएस फ़ाइल:

.topAligned { 
    vertical-align: top; 
} 

panelGrid में पहली स्तंभ की सामग्री तब उनके कोशिकाओं के भीतर शीर्ष-गठबंधन किया जाएगा।

Answer 3

जैसा कि निम्न उदाहरण कोड में panelGrid के लिए styleClass का उपयोग करें:

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

फिर सीएसएस कॉन्फ़िगर में इस प्रकार है:

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

इस विधि के साथ आप नहीं शीर्ष केवल करने में सक्षम होंगे पंक्तियों को संरेखित करें लेकिन आप एक ही स्टाइल क्लास को अन्य पैनल ग्रिड के भीतर पैनल पैनल के भीतर भी लागू कर सकते हैं।

उदाहरण के लिए:

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