如何更改 Primefaces 中 outputLabel、inputText 组件的宽度。 Is custom style can be applied on Primefaces components? .
我试过下面的自定义样式类，但这些都不起作用。
style.css
.customTxtWidth150px .ui-inputfield .ui-inputtext .ui-widget{
width:150px !important;
}
.customLblWidth150px .ui-outputlabel {
width: 150px;
}
.lblRed {
color: red;
}
.lblWhite {
color: white;
}
注册.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 组件上应用自定义宽度？
截图:
最佳答案
<?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>
输出看起来像这些...检查图像
关于css - 如何更改 Primefaces 组件的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22066858/