2014-02-27 56 views
3

如何在Primefaces中更改outputLabel,inputText組件的寬度。 Is custom style can be applied on Primefaces components?如何更改Primefaces組件的寬度?

我試過下面的自定義樣式類,但這些都不起作用。

的style.css

.customTxtWidth150px .ui-inputfield .ui-inputtext .ui-widget{ 
    width:150px !important; 
} 

.customLblWidth150px .ui-outputlabel { 
    width: 150px; 
} 
.lblRed { 
    color: red; 
} 

.lblWhite { 
    color: white; 
} 

registration.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> 

<f:view> 
    <h:head> 
     <title>Registration</title> 
     <f:loadBundle var="mysqlmaven" basename="com.uk.mysqlmaven.resources.mysqlmaven" /> 
     <h:outputStylesheet name="style/mysqlmaven.css"></h:outputStylesheet> 
    </h:head> 
    <h:form id="registrationForm"> 
     <table align="center"> 
      <tr> 
       <td><h:panelGrid> 
         <h:messages id="registrationMessageId"></h:messages> 
        </h:panelGrid> <h:panelGrid columns="1" cellpadding="2" frame="hsides" border="0"> 
         <h:panelGrid columns="2" border="0"> 
          <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
          <h:panelGroup layout="block"> 
           <p:outputLabel value="FirstName" styleClass="customLblWidth150px"></p:outputLabel> 
           <p:inputText id="firstNameId" value="#{registrationBean.firstName}" styleClass="customTxtWidth150px"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2" border="0"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
           <p:outputLabel value="MiddleName" styleClass="customLblWidth150px"></p:outputLabel> 
           <p:inputText id="middleNameId" value="#{registrationBean.middleName}" styleClass="customTxtWidth150px"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblLastName}"></p:outputLabel> 
           <p:inputText id="lastNameId" label="#{mysqlmaven.lblLastName}" value="#{registrationBean.lastName}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblFathersOrGuardianName}"></p:outputLabel> 
           <p:inputText id="fathersOrGuardianNameId" label="#{mysqlmaven.lblFathersOrGuardianName}" value="#{registrationBean.fathersOrGuardianName}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblQualification}"></p:outputLabel> 
           <p:inputText id="qualificationId" label="#{mysqlmaven.lblQualification}" value="#{registrationBean.qualification}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblDateOfBirth}"></p:outputLabel> 
           <p:calendar id="dateOfBirthId" label="#{mysqlmaven.lblDateOfBirth}" value="#{registrationBean.dateOfBirth}" pattern="dd-MMM-yyyy" showWeek="true" navigator="true" yearRange="c-100:c+0"></p:calendar> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblPrimaryEmail}"></p:outputLabel> 
           <p:inputText id="primaryEmailId" label="#{mysqlmaven.lblPrimaryEmail}" value="#{registrationBean.primaryEmail}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblMobile}"></p:outputLabel> 
           <p:inputText id="mobileId" label="#{mysqlmaven.lblMobile}" value="#{registrationBean.mobile}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblPhone}"></p:outputLabel> 
           <p:inputText id="phoneId" label="#{mysqlmaven.lblPhone}" value="#{registrationBean.phone}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblCountry}"></p:outputLabel> 
           <p:inputText id="countryId" label="#{mysqlmaven.lblCountry}" value="#{registrationBean.country}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblState}"></p:outputLabel> 
           <p:inputText id="stateId" label="#{mysqlmaven.lblState}" value="#{registrationBean.state}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblCity}"></p:outputLabel> 
           <p:inputText id="cityId" label="#{mysqlmaven.lblCity}" value="#{registrationBean.city}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblBloodGroup}"></p:outputLabel> 
           <p:inputText id="bloodGroupId" label="#{mysqlmaven.lblBloodGroup}" value="#{registrationBean.bloodGroup}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblHeight}"></p:outputLabel> 
           <p:inputText id="heightId" label="#{mysqlmaven.lblHeight}" value="#{registrationBean.height}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblHobbies}"></p:outputLabel> 
           <p:inputText id="hobbiesId" label="#{mysqlmaven.lblHobbies}" value="#{registrationBean.hobbies}"></p:inputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblPresentAddress}"></p:outputLabel> 
           <p:inputTextarea id="presentAddressId" label="#{mysqlmaven.lblPresentAddress}" value="#{registrationBean.presentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterOne" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea> 
           <h:outputText id="counterOne"></h:outputText> 
          </h:panelGroup> 
         </h:panelGrid> 
         <h:panelGrid columns="2"> 
          <h:panelGroup> 
           <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
           <p:outputLabel value="#{mysqlmaven.lblPermanentAddress}"></p:outputLabel> 
           <p:inputTextarea id="perminentAddressId" label="#{mysqlmaven.lblPermanentAddress}" value="#{registrationBean.permanentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterTwo" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea> 
           <h:outputText id="counterTwo"></h:outputText> 
          </h:panelGroup> 
         </h:panelGrid> 
        </h:panelGrid> <h:panelGrid columns="2"> 
         <p:commandButton id="submitId" value="Submit" title="Submit" action="#{registrationBean.submitRegistrationAction}"></p:commandButton> 
         <p:commandButton id="cancelId" value="Cancel" actionListener="#{registrationBean.cancelRegistrationAction}"></p:commandButton> 
        </h:panelGrid></td> 
      </tr> 
     </table> 
    </h:form> 
</f:view> 

</html> 

如何在primefaces組件應用自定義寬度?

截圖:

primefaces ui

+0

什麼是'xhtml'中的頂級標記?粘貼整個'xhtml'代碼... –

+0

@Wannacoffee完整registration.xhtml代碼添加。 – pudaykiran

+0

你的代碼有嚴重的設計問題......'

'已經被''在primefaces中的jsf&'中替換了。那麼有什麼必要......從HTTP基本教程檢查://www.mkyong.com/jsf2/jsf-2-panelgrid-example/... –

回答

-2

嘗試這個

input.customTxtWidth150px{ 
    width:150px !important; 
} 

label.customLblWidth150px { 
    width: 150px !important; 
} 
+0

css不適用。 – pudaykiran

+0

你能鏈接或呈現html代碼嗎? – Dheeraj

3
<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:p="http://primefaces.org/ui" 
     xmlns:c="http://java.sun.com/jsp/jstl/core"> 

    <h:head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <h:outputStylesheet name="./css/default.css"/> 
    <h:outputStylesheet name="./css/cssLayout.css"/> 
    <title>Unicare</title> 
    </h:head> 

    <h:body > 
    <div class="center_content"> 
     <ui:insert> 
     <center> 
      <h:form > 
      <p:panel id="panel" header="Sign-Up Form"> 
       <p:messages globalOnly="true"/>   
       <h:panelGrid columns="1" cellpadding="5px" cellspacing="3px"> 

       <p:outputLabel value="Name" /> 
       <h:panelGrid columns="4" > 
       <p:inputText id="fname" value="#{registration.first_name}" required="true" requiredMessage="Enter First name" > 
        <p:watermark value="First Name" for="fname" /> 
       </p:inputText> 
       <p:message for="fname" /> 

       <p:inputText id="lname" value="#{registration.last_name}" required="true" requiredMessage="Enter Last name" > 
        <p:watermark value="Last Name" for="lname" /> 
       </p:inputText> 
       <p:message for="lname" /> 
       </h:panelGrid> 

       <p:outputLabel value="Username" /> 
       <h:panelGrid columns="2" >        
       <p:inputText id="uname" value="#{registration.username}" required="true" requiredMessage="Enter Username" label="Username" > 
        <f:validateLength maximum="12" minimum="6" /> 
       </p:inputText> 
       <p:message for="uname" /> 
       </h:panelGrid> 

       <p:outputLabel value="Enter Password" /> 
       <h:panelGrid columns="4" > 
       <p:password id="password1" value="#{registration.password1}" required="true" feedback="true" weakLabel="Password weak" strongLabel="Strong password" goodLabel="Good strength" maxlength="12" requiredMessage="Enter password" label="Password 1" > 
        <p:watermark value="Password" for="password1" /> 
        <f:validateLength minimum="6" /> 
       </p:password> 
       <p:message for="password1" /> 

       <p:password id="password2" value="#{registration.password2}" required="true" requiredMessage="Enter Confirm password" label="Password 2"> 
        <p:watermark value="Confirm Password" for="password2" /> 
        <f:validateLength minimum="6" /> 
       </p:password> 
       <p:message for="password2" /> 
       </h:panelGrid> 

       <p:outputLabel value="Contact No" /> 

       <h:panelGrid columns="3" > 
       <p:selectOneMenu style="width: 195px"> 
        <f:selectItem itemLabel="Mobile" itemValue="1" /> 
        <f:selectItem itemLabel="Work" itemValue="2" /> 
        <f:selectItem itemLabel="Office" itemValue="3" /> 
        <f:selectItem itemLabel="Work Fax" itemValue="4" /> 
       </p:selectOneMenu> 

       <p:inputMask id="contact1" value="#{registration.contact1}" required="true" requiredMessage="Enter Contact No" mask="9999999999" > 
       </p:inputMask> 
       <p:message for="contact1" /> 
       <p:selectOneMenu style="width: 195px"> 
        <f:selectItem itemLabel="Work" itemValue="1" /> 
        <f:selectItem itemLabel="Mobile" itemValue="2" /> 
        <f:selectItem itemLabel="Office" itemValue="3" /> 
        <f:selectItem itemLabel="Work Fax" itemValue="4" /> 
       </p:selectOneMenu> 

       <p:inputMask value="#{registration.contact2}" id="contact2" mask="9999999999" > 
       </p:inputMask> 
       </h:panelGrid> 

       <p:outputLabel value="Enter E-mail" /> 
       <h:panelGrid columns="3" >  
        <p:inputText id="email1" value="#{registration.e_mail1}" required="true" requiredMessage="Enter E-Mail " > 
        <p:watermark value="Personal " for="email1" />      
        </p:inputText> 
        <p:inputText id="email2" value="#{registration.e_mail2}"> 
        <p:watermark value="Official" for="email2" /> 
        </p:inputText> 
        <p:message for="email1" /> 
       </h:panelGrid> 
       <p:outputLabel value="Employer Details" /> 

       <h:panelGrid columns="4" > 
        <p:inputText id="emp1" value="#{registration.employeer}" required="true" requiredMessage="Enter Employeer Details" > 
        <p:watermark value="Employeer Name" for="emp1" /> 
        </p:inputText> 
        <p:message for="emp1" /> 
        <p:inputText id="emp2" value="#{registration.designation}" required="true" requiredMessage="Enter Designation"> 
        <p:watermark value="Designation" for="emp2" /> 
        </p:inputText> 
        <p:message for="emp2" /> 
       </h:panelGrid> 

       <p:outputLabel value="Address Details" /> 
       <h:panelGrid columns="4" > 
        <p:inputText id="address1" value="#{registration.street_address}" required="true" requiredMessage="Enter Street Address" > 
        <p:watermark value="Street Address * " for="address1" /> 
        </p:inputText> 
        <p:message for="address1" /> 

        <p:inputText id="address2" value="#{registration.state}" required="true" requiredMessage="Enter State Address" > 
        <p:watermark value="State" for="address2" /> 
        </p:inputText> 
        <p:message for="address2" /> 
        <p:selectOneMenu value="#{registration.country}" id="con" required="true" requiredMessage="Select Country" style="width: 195px" >    
        <f:selectItems itemLabel="#{registration.myList}" value="#{registration.myList}" /> 
        </p:selectOneMenu> 
        <p:message for="con" /> 

        <p:inputText id="address4" value="#{registration.pin_code}" required="true" requiredMessage=" Enter PIN Code" > 
        <p:watermark value="PIN Code" for="address4" /> 
        </p:inputText> 
        <p:message for="address4" /> 
       </h:panelGrid> 
       </h:panelGrid> 
       <center> 
       <p:commandButton ajax="false" id="log" value="Submit" action="#{registration.passcheck}" style="height: 40px;width: 100px;"/> 
       </center>    
      </p:panel> 
      </h:form> 
     </center> 
     </ui:insert> 

     <div id="bottom"> 
     <ui:insert name="bottom"> 
      <center> 
      <h:link value="Home" outcome="Home" /> 
      </center> 
     </ui:insert> 
     </div> 
    </div> 
    </h:body> 
</html> 

輸出看起來像這些...查看圖像registration

+0

它適用於''組件,但不適用於''p:outputLabel />。 Ganesh Jagan, – pudaykiran

+0

。編輯帖子並提交。不要張貼到許多答案。 – pudaykiran

+0

嗨.....我明白你的問題,現在你正試圖重寫primefaces默認css.here我添加了我的演示我猜你正在尋找類似的東西.....如果它的幫助意味着我將分享模板與您。 http://59.99.236.157:9999/Unicare/faces/Registration.xhtml –

-1

爲了在列是一樣的ize,應該只有一個panelGrid(將被轉換爲一個表)。請注意,最後一列需要與panelGroup分組,以便始終保持3套

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> 

<f:view> 
    <h:head> 
     <title>Registration</title> 
     <f:loadBundle var="mysqlmaven" basename="com.uk.mysqlmaven.resources.mysqlmaven" /> 
     <h:outputStylesheet name="style/mysqlmaven.css"></h:outputStylesheet> 
    </h:head> 
    <h:form id="registrationForm"> 
     <h:panelGroup> 
      <h:messages id="registrationMessageId"></h:messages> 
     </h:panelGroup> 
     <h:panelGrid columns="3" cellpadding="2" frame="hsides" border="0"> 
      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="FirstName" styleClass="customLblWidth150px"></p:outputLabel> 
      <p:inputText id="firstNameId" value="#{registrationBean.firstName}" styleClass="customTxtWidth150px"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
      <p:outputLabel value="MiddleName" styleClass="customLblWidth150px"></p:outputLabel> 
      <p:inputText id="middleNameId" value="#{registrationBean.middleName}" styleClass="customTxtWidth150px"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblLastName}"></p:outputLabel> 
      <p:inputText id="lastNameId" label="#{mysqlmaven.lblLastName}" value="#{registrationBean.lastName}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblFathersOrGuardianName}"></p:outputLabel> 
      <p:inputText id="fathersOrGuardianNameId" label="#{mysqlmaven.lblFathersOrGuardianName}" value="#{registrationBean.fathersOrGuardianName}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblQualification}"></p:outputLabel> 
      <p:inputText id="qualificationId" label="#{mysqlmaven.lblQualification}" value="#{registrationBean.qualification}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblDateOfBirth}"></p:outputLabel> 
      <p:calendar id="dateOfBirthId" label="#{mysqlmaven.lblDateOfBirth}" value="#{registrationBean.dateOfBirth}" pattern="dd-MMM-yyyy" showWeek="true" navigator="true" yearRange="c-100:c+0"></p:calendar> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblPrimaryEmail}"></p:outputLabel> 
      <p:inputText id="primaryEmailId" label="#{mysqlmaven.lblPrimaryEmail}" value="#{registrationBean.primaryEmail}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblMobile}"></p:outputLabel> 
      <p:inputText id="mobileId" label="#{mysqlmaven.lblMobile}" value="#{registrationBean.mobile}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblPhone}"></p:outputLabel> 
      <p:inputText id="phoneId" label="#{mysqlmaven.lblPhone}" value="#{registrationBean.phone}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblCountry}"></p:outputLabel> 
      <p:inputText id="countryId" label="#{mysqlmaven.lblCountry}" value="#{registrationBean.country}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblState}"></p:outputLabel> 
      <p:inputText id="stateId" label="#{mysqlmaven.lblState}" value="#{registrationBean.state}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblCity}"></p:outputLabel> 
      <p:inputText id="cityId" label="#{mysqlmaven.lblCity}" value="#{registrationBean.city}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblBloodGroup}"></p:outputLabel> 
      <p:inputText id="bloodGroupId" label="#{mysqlmaven.lblBloodGroup}" value="#{registrationBean.bloodGroup}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblHeight}"></p:outputLabel> 
      <p:inputText id="heightId" label="#{mysqlmaven.lblHeight}" value="#{registrationBean.height}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblHobbies}"></p:outputLabel> 
      <p:inputText id="hobbiesId" label="#{mysqlmaven.lblHobbies}" value="#{registrationBean.hobbies}"></p:inputText> 

      <p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblPresentAddress}"></p:outputLabel> 
      <h:panelGroup> 
       <p:inputTextarea id="presentAddressId" label="#{mysqlmaven.lblPresentAddress}" value="#{registrationBean.presentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterOne" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea> 
       <h:outputText id="counterOne"></h:outputText> 
      </h:panelGroup> 

      <p:outputLabel value="*" styleClass="lblRed"></p:outputLabel> 
      <p:outputLabel value="#{mysqlmaven.lblPermanentAddress}"></p:outputLabel> 
      <h:panelGroup> 
       <p:inputTextarea id="perminentAddressId" label="#{mysqlmaven.lblPermanentAddress}" value="#{registrationBean.permanentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterTwo" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea> 
       <h:outputText id="counterTwo"></h:outputText> 
      </h:panelGroup> 
     </h:panelGrid> 

     <h:panelGrid columns="2"> 
      <p:commandButton id="submitId" value="Submit" title="Submit" action="#{registrationBean.submitRegistrationAction}"></p:commandButton> 
      <p:commandButton id="cancelId" value="Cancel" actionListener="#{registrationBean.cancelRegistrationAction}"></p:commandButton> 
     </h:panelGrid> 
    </h:form> 
</f:view> 

</html>