How to change width of Primefaces components?
css, jsf, jsf-2, primefaces
Solution
<?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
Problem
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: