css - 如何更改 Primefaces 组件的宽度？-6ren

css - 如何更改 Primefaces 组件的宽度？

转载作者：行者123 更新时间：2023-12-02 03:38:01

如何更改 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 组件上应用自定义宽度？

截图:

primefaces ui

最佳答案

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

输出看起来像这些...检查图像 registration

关于css - 如何更改 Primefaces 组件的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22066858/

文章推荐： irc - mIRC Bot 模拟击键

文章推荐： jsf - 使用 EL 时的日志/反馈消息

html - 宽度 :100% vs. 宽度:继承
我的理解是 width: 100% 让元素的宽度与其父元素的宽度相同，而 width: inherit 只有在明确指定父元素的宽度时才这样做.这种理解是否正确？如果是这样，在我看来，当 width:
iphone - 如何设置 'div'元素满屏(宽度)，当iphone改变方向时，它也是全屏(宽度)
并设置“高度”为全屏的 1/2。这是我的代码: div{ background:red; } 最佳答案我会结合使用 css 和 javascript(使
html - CSS 表格 100% 宽度，td 宽度
编辑 2: 问题似乎出在规则的“bigTable”元素上。显然，在布局模板上使用时继承了错误的最小宽度。我仍在调查此事。不过，我将再尝试一次 div。一个大问题是使用固定导航和动态内容，但我已经为此
html - 100% 宽度 = 视口(viewport)宽度。如何让它和页面正文一样宽？
我的网站需要显示宽表。在它上面是标题，它应该和整个页面一样宽(在这种情况下，和表格一样宽)。但是，它的宽度与视口(viewport)(屏幕尺寸)一样宽，因此显示时看起来还不错，但是一旦用户滚动到侧面，
html - 我的 25% 宽度 flex 元素在包装后占用 100% 宽度
我有一个小问题。我总是使用 float 来安排我的元素。我正在转向 flexbox，我做了一些例子，一切都很好，但我正在做一个事情进展不顺利的例子。我有一个包含 1 到 12 种产品的容器，每行 4
html - CSS 宽度/高度与 HTML 宽度/高度属性具有不同的效果，具体取决于元素类型
例如，它们在自动边距方面会导致完全不同的行为。看看这个 fiddle :https://jsfiddle.net/L1rk46xy/ .fixed { display:fixed;
css - 在 Wordpress 帖子中为文本设置 75% 宽度，为图像设置 100% 宽度？
我尝试在帖子中将段落的宽度设置为 75%，并将图像的响应宽度设置为 100%。然而，总是在默认。 Some texts Some texts Some texts Some texts 目前，我只
html - img 元素上的 HTML 宽度/高度属性和 CSS 宽度/高度属性有什么区别？
HTML 元素可以有 width/height 属性，也可以有 CSS width/height 属性: HTML 属性和 CSS 属性有什么区别，它们应该具有相同的效果吗？最佳答案有关该主题的
javascript - jQuery - 循环遍历 TD 宽度，然后循环遍历 TH 并应用 TD 宽度
我有一个流动的 table ，现在需要一个固定的 thead。问题是当你固定 thead 时，th-s 不尊重 tbody 的 td-s 的宽度。列的大小都由 BootStrap 处理。我已经阅读了很
javascript - 两个相邻的 50% 宽度/等高字段集的正确 HTML 对齐/大小低于 100% 宽度？
我想像这样布置一个区域: ---- ---- |A | |B | | | | | ---- ---- --------- |C | --------- 三个盒子中的每一个都是 .盒子
css - Bootstrap 和 Bootstrap-Select - 使 Select 和其他元素适合 div 宽度，100% 宽度/高度
我遇到了很多问题。 1) 我正在使用 Bootstrap-Select 来获得具有搜索功能的现代选择框，但无论我尝试什么，我似乎都无法获得填充 col-span 的选择。 2) 我已将该行拆分为 2
javascript - 如何使用窗口滚动(jquery)调整 div 宽度 - 但 css 中只有 1/3 的 div 宽度
http://jsfiddle.net/95EtZ/1/ 问题在行动中解决了一半。现在它是用 javascript 中硬编码的容器宽度设置的。我需要 js 来获取容器 div 的宽度——使用窗口滚
html - 如果 parent 的 div 也是 100% 宽度/高度，如何给 child div 宽度/高度 100%
我想要两个宽度和高度均为 100% 的 div。我知道子 div 不会工作，因为父 div 没有特定的高度，但有没有办法解决这个问题？ HTML: CSS: body
jQuery动态设置高度、宽度
我需要使用 jQuery 更改的高度和宽度我尝试了以下代码 jQuery('#chart_popup').css('height','600px'); jQuery('#chart_popup')
WPF 高度/宽度
在自定义 WPF 控件中，我想将控件的宽度设置为高度的函数。例如:Width = Height/3 * x; 实现此目的的最佳方法是什么，以便控件正确且流畅地调整大小(和初始大小)？最佳答案您可以
r - R图形图中的顶点边界颜色/宽度
我正在使用igraph在R中绘制图形，执行plot(mygraph, vertex.color = "green")之类的操作。有没有办法改变顶点边界的颜色和/或宽度？最佳答案查看下面的代码；
jquery - 如何使用jquery设置图像的高度、宽度
有没有办法使用jquery设置图像的高度和宽度？以下是我的代码 var img = new Image(); // Create image $(img).load(function(){
Delphi 获取具有滚动条的组件的实际全高/宽度
这个问题类似于 how-to-find-the-actual-width-of-grid-component-with-scrollbar-in-delphi 但我无法获取 CalcDrawInfo(
边框弄乱了 HTML 宽度
这里是 HTML/CSS 新手。试图将我在 Codeacademy 上学到的知识付诸实践，但我遇到了一个问题，即我设置为 width:100% 的 header 最终离开了页面。我相信这是因为边框，
边框弄乱了 HTML 宽度
这里是 HTML/CSS 新手。试图将我在 Codeacademy 上学到的知识付诸实践，但我遇到了一个问题，即我设置为 width:100% 的 header 最终离开了页面。我相信这是因为边框，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何更改 Primefaces 组件的宽度？