title: How to change width of Primefaces components?
body: <p>How to change width of outputLabel, inputText components in Primefaces. <code>Is custom style can be applied on Primefaces components?</code>.</p>
  
  <p>I tried below custom style class but these are not working.</p>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>.customTxtWidth150px .ui-inputfield .ui-inputtext .ui-widget{
      width:150px !important;
  }
  
  .customLblWidth150px .ui-outputlabel {
      width: 150px;
  }
  .lblRed {
      color: red;
  }
  
  .lblWhite {
      color: white;
  }
  </code></pre>
  
  <p><strong>registration.xhtml</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;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"&gt;
  
  &lt;f:view&gt;
      &lt;h:head&gt;
          &lt;title&gt;Registration&lt;/title&gt;
          &lt;f:loadBundle var="mysqlmaven" basename="com.uk.mysqlmaven.resources.mysqlmaven" /&gt;
          &lt;h:outputStylesheet name="style/mysqlmaven.css"&gt;&lt;/h:outputStylesheet&gt;
      &lt;/h:head&gt;
      &lt;h:form id="registrationForm"&gt;
          &lt;table align="center"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;h:panelGrid&gt;
                          &lt;h:messages id="registrationMessageId"&gt;&lt;/h:messages&gt;
                      &lt;/h:panelGrid&gt; &lt;h:panelGrid columns="1" cellpadding="2" frame="hsides" border="0"&gt;
                          &lt;h:panelGrid columns="2" border="0"&gt;
                              &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                              &lt;h:panelGroup layout="block"&gt;
                                  &lt;p:outputLabel value="FirstName" styleClass="customLblWidth150px"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="firstNameId" value="#{registrationBean.firstName}" styleClass="customTxtWidth150px"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2" border="0"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblWhite"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="MiddleName" styleClass="customLblWidth150px"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="middleNameId" value="#{registrationBean.middleName}" styleClass="customTxtWidth150px"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblLastName}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="lastNameId" label="#{mysqlmaven.lblLastName}" value="#{registrationBean.lastName}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblFathersOrGuardianName}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="fathersOrGuardianNameId" label="#{mysqlmaven.lblFathersOrGuardianName}" value="#{registrationBean.fathersOrGuardianName}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblWhite"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblQualification}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="qualificationId" label="#{mysqlmaven.lblQualification}" value="#{registrationBean.qualification}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblDateOfBirth}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:calendar id="dateOfBirthId" label="#{mysqlmaven.lblDateOfBirth}" value="#{registrationBean.dateOfBirth}" pattern="dd-MMM-yyyy" showWeek="true" navigator="true" yearRange="c-100:c+0"&gt;&lt;/p:calendar&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblPrimaryEmail}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="primaryEmailId" label="#{mysqlmaven.lblPrimaryEmail}" value="#{registrationBean.primaryEmail}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblMobile}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="mobileId" label="#{mysqlmaven.lblMobile}" value="#{registrationBean.mobile}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblWhite"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblPhone}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="phoneId" label="#{mysqlmaven.lblPhone}" value="#{registrationBean.phone}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblCountry}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="countryId" label="#{mysqlmaven.lblCountry}" value="#{registrationBean.country}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblState}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="stateId" label="#{mysqlmaven.lblState}" value="#{registrationBean.state}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblCity}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="cityId" label="#{mysqlmaven.lblCity}" value="#{registrationBean.city}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblWhite"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblBloodGroup}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="bloodGroupId" label="#{mysqlmaven.lblBloodGroup}" value="#{registrationBean.bloodGroup}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblWhite"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblHeight}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="heightId" label="#{mysqlmaven.lblHeight}" value="#{registrationBean.height}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblWhite"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblHobbies}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputText id="hobbiesId" label="#{mysqlmaven.lblHobbies}" value="#{registrationBean.hobbies}"&gt;&lt;/p:inputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblWhite"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblPresentAddress}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputTextarea id="presentAddressId" label="#{mysqlmaven.lblPresentAddress}" value="#{registrationBean.presentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterOne" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"&gt;&lt;/p:inputTextarea&gt;
                                  &lt;h:outputText id="counterOne"&gt;&lt;/h:outputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                          &lt;h:panelGrid columns="2"&gt;
                              &lt;h:panelGroup&gt;
                                  &lt;p:outputLabel value="*" styleClass="lblRed"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:outputLabel value="#{mysqlmaven.lblPermanentAddress}"&gt;&lt;/p:outputLabel&gt;
                                  &lt;p:inputTextarea id="perminentAddressId" label="#{mysqlmaven.lblPermanentAddress}" value="#{registrationBean.permanentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterTwo" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"&gt;&lt;/p:inputTextarea&gt;
                                  &lt;h:outputText id="counterTwo"&gt;&lt;/h:outputText&gt;
                              &lt;/h:panelGroup&gt;
                          &lt;/h:panelGrid&gt;
                      &lt;/h:panelGrid&gt; &lt;h:panelGrid columns="2"&gt;
                          &lt;p:commandButton id="submitId" value="Submit" title="Submit" action="#{registrationBean.submitRegistrationAction}"&gt;&lt;/p:commandButton&gt;
                          &lt;p:commandButton id="cancelId" value="Cancel" actionListener="#{registrationBean.cancelRegistrationAction}"&gt;&lt;/p:commandButton&gt;
                      &lt;/h:panelGrid&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/h:form&gt;
  &lt;/f:view&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>How to apply custom width on primefaces components ?.</p>
  
  <p><strong>Screenshot:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Oiu66.png" alt="primefaces ui"></p>