How to change width of Primefaces components?

css jsf jsf-2 primefaces

46,079

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

output look like these ...check the image registration

46,079

Author by

UdayKiran Pulipati

Senior Java Programmer in Netxcell Ltd (Working for Client State Bank Of India [Java Fullstack Developer]) | Formerly EBIX Cash (20th Century Fox Television Distribution) | PBSystems Inc. I have knowledge on: Languages: Java 8 Frameworks: Struts, JSF, RichFaces, Oracle ADF Faces, Primefaces, Spring, Spring Boot Scripting: Typescript, Javascript, jQuery UI Technologies: HTML, CSS, Angular, Angular JS (Basic Level) Services: Restful IDE: STS, Eclipse, MyEclipse, MySQL, SQL Server ORM Frameworks: Hibernate, JPA NoSQL DB: MongoDB (Basic Level) Platform as a Service(Paas): Google App Engine (Basic Level) Version Control Tools: SVN, GIT

Updated on July 09, 2022

Comments

UdayKiran Pulipati almost 2 years

How to change width of outputLabel, inputText components in Primefaces. Is custom style can be applied on Primefaces components?.

I tried below custom style class but these are not working.

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>

How to apply custom width on primefaces components ?.

Screenshot:

primefaces ui

UdayKiran Pulipati about 10 years

It works for <p:inputText/> component but not for `'p:outputLabel/>.
UdayKiran Pulipati about 10 years

Ganesh Jagan. edit the post and submit. Don't post to many answers.
Ganesh Jagan about 10 years

Hi.....i understood your problem now u are trying to override primefaces default css.here i added my demo i guess u are looking similar kind of things.....If It's help's means i will share the template with you. 59.99.236.157:9999/Unicare/faces/Registration.xhtml
UdayKiran Pulipati about 10 years

Take long time to open a link. Can you share template.
UdayKiran Pulipati about 10 years

UI suggestion is good, but I want to increase the primefaces label width.