我正在尝试更改自动完成(素数 3.3)的大小,我尝试了以下所有选项,但大小保持不变。
size="600"
Style="width:600px;"
StyleClass > css file with width:600px;
但是它们都没有增加大小,所以我该怎么做。
注意:我注意到,如果我指定(宽度>面板网格大小),则面板网格大小会自动更改,但自动完成仍然是默认大小。
更新:我的自动完成代码
<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">
我使用 inputStyle
属性更改了 Primefaces 5.2 中自动完成的默认大小。
例:
inputStyle="width: 100px"
只需要更改size
;
size="30"
<p:autoComplete id="yourId" value="#{YourBean.value}" completeMethod="#{YurBean.complete}" size="30"/>
若要更改自动完成的大小,需要覆盖素数的默认样式"自动完成"。使用Firebug,你可以准确地找到styleclass名称。如果使用 firebug 检查自动完成元素,则可以像 .ui-autocomplete-input.ui-inputfield
{
width : 50px !important;
}
这里要指出的是坚持高优先级。
如果我们使用[multiple]="true"
指令,则所有解决方案都不起作用。另外这个问题在PrimeNg论坛上也问过,没有解决办法。
如果您不使用上述指令[multiple]="true"
以下解决方案将起作用。
-
[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
-
class="p-autocomplete"
和样式文件中,您可以将此类定义为.p-autocomplete{ width: 100%; }
请检查所有这些。
用法:
<p:autoComplete
...
style = "width: 100%"
inputStyle = "width: 100%" />
只需将 100% 更改为您需要的像素大小。
这对我来说可以用 [multiple]="true" 更改 p:autoComplete 的宽度。
首先,用浏览器检查Primefaces生成的html和css代码,并查找p:autoComplete的样式。就我而言,使用 Primefaces 6.1,样式定义如下:
.ui-autocomplete-multiple-container.ui-inputfield {...
然后,按以下方式在样式文件中使用自动完成的 id:
#myAutoCompleteId .ui-autocomplete-multiple-container.ui-inputfield {
width: 330px !important;
}
这样,您可以为每个自动完成功能获取不同的宽度。
我知道的最简单的方法是这样的:向页面添加样式标签把这个类放进去:.ui-inputfield使用此属性:宽度:600px;
但请注意,您将更改页面中的所有输入:)
我使用以下 css 做到了
.ui-autocomp .ui-inputfield {
clear: left;
cursor: text;
list-style-type: none;
margin: 0;
min-height: 1px;
overflow: hidden;
width: 250px;
}
只需要确保选择不超过 250px,否则关闭图标 + 额外文本将不可见。
注意:我从Primeface css文件中得到了这个
已经很长时间了,但是! 在挖掘样式后,这些在 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;
}
根据您的需求进行调整。