CSS 如何更改 Primefaces 组件的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22066858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 01:59:01 来源:igfitidea点击:
How to change width of Primefaces components?
提问by UdayKiran Pulipati
How to change width of outputLabel, inputText components in Primefaces. Is custom style can be applied on Primefaces components?.
如何更改 Primefaces 中 outputLabel、inputText 组件的宽度。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
注册.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 ?.
如何在primefaces 组件上应用自定义宽度？
Screenshot:
截屏：
回答by Ganesh Jagan
<?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
输出看起来像这些...检查图像
回答by Saulo Egito
In order to the columns to be the same size, there should only be one panelGrid (which will be converted to a single table). Note that the last columns needed to be grouped with a panelGroup so that 3 sets always remain
为了使列的大小相同，应该只有一个 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>
回答by Dheeraj
Try This
尝试这个
input.customTxtWidth150px{
width:150px !important;
}
label.customLblWidth150px {
width: 150px !important;
}
