我正在尝试更改autoComplete(primefaces 3.3)的大小,我尝试了以下所有选项,但大小保持不变。
size="600"
Style="width:600px;"
StyleClass > css file with width:600px;
但是没有一个增加尺寸,所以我该怎么做。
注意:我注意到如果我指定(宽度> PanelGrid大小),则面板网格大小会自动更改,但autoComplete仍然是默认大小。
更新: 我的自动完成代码
<p:autoComplete id="autoTest" value="#{testMB.selectedTest}"
completeMethod="#{testMB.completeTest}" var="test"
itemLabel="#{test.name}" itemValue="#{test}" converter="#{testConverter}"
forceSelection="TRUE" queryDelay="1000" multiple="TRUE" size="600"
process="@this">
答案 0 :(得分:12)
我使用inputStyle
属性更改了Primefaces 5.2中AutoComplete的默认大小。
示例:
inputStyle="width: 100px"
答案 1 :(得分:6)
只需要更改size
;
size="30"
<p:autoComplete id="yourId" value="#{YourBean.value}" completeMethod="#{YurBean.complete}" size="30"/>
答案 2 :(得分:5)
要更改AutoComplete。的大小,您需要覆盖自动完成的primefaces的默认styleClass。
使用firebug,您可以准确地找到样式名称。如果使用firebug。检查AutoComplete元素,则可以覆盖类似.ui-autocomplete-input.ui-inputfield
{
width : 50px !important;
}
!重要的是要注意坚持高度优先。
答案 3 :(得分:1)
如果我们使用[multiple]="true"
指令,则所有解决方案都不起作用。
此外,这个问题也在primeNg论坛中提出,并且没有解决方案。
如果您不使用上述[multiple]="true"
指令
以下解决方案将有效。
[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
class="p-autocomplete"
,在样式文件中,您可以将此类定义为.p-autocomplete{ width: 100%; }
请检查所有这些。
答案 4 :(得分:0)
我所知道的最简单的方法是: 在页面中添加样式标记 把这个课放在其中: 的.ui-inputfield 使用此属性: 宽度:600px的;
但请注意,您将更改页面中的所有输入 :)
答案 5 :(得分:0)
我使用下面的css
做到了.ui-autocomp .ui-inputfield {
clear: left;
cursor: text;
list-style-type: none;
margin: 0;
min-height: 1px;
overflow: hidden;
width: 250px;
}
只需要确保选择不超过250像素,否则关闭图标+额外文字将不可见。
注意:我从primeface css文件中得到了这个
答案 6 :(得分:0)
像这样使用:
<p:autoComplete
...
style = "width: 100%"
inputStyle = "width: 100%" />
只需按像素更改100%即可。
答案 7 :(得分:0)
这对我有用,可以用[multiple] =“true”更改p:autoComplete的宽度。
首先,使用浏览器检查Primefaces生成的html和css代码,然后查找p:autoComplete的样式。在我的例子中,使用Primefaces 6.1,样式定义如下:
.ui-autocomplete-multiple-container.ui-inputfield {...
然后,以这种方式在样式文件中使用autoComplete的id:
#myAutoCompleteId .ui-autocomplete-multiple-container.ui-inputfield {
width: 330px !important;
}
这样,您可以为每个autoComplete获得不同的宽度。
答案 8 :(得分:0)
我知道已经很久了!在挖掘样式之后,这些对我来说适用于PF 6.1的多个自动完成功能:
.ui-autocomplete{
width: 100% !important;
}
.ui-autocomplete-input{
width: 100% !important;
}
.ui-autocomplete-multiple {
width: 98% !important;
}
.p-autocomplete {
width: 98% !important;
}
.ui-autocomplete-multiple-container {
width: 100% !important;
}
根据需要进行调整。