6

我正在尝试更改自动完成的大小（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">
4

9 回答 9

14

inputStyle我通过使用属性更改了 Primefaces 5.2 中自动完成的默认大小。

例子：

inputStyle="width: 100px"
于 2015-05-05T15:16:35.403 回答
8

只需要改变size;

     size="30"

    <p:autoComplete id="yourId" value="#{YourBean.value}" completeMethod="#{YurBean.complete}" size="30"/>
于 2012-09-24T09:21:18.077 回答
5

要更改 AutoComplete 的大小，您需要为 AutoComplete 覆盖 primefaces 的默认 styleClass。使用 firebug，您可以准确地找出样式类名称。如果您使用萤火虫检查自动完成元素，您可以覆盖样式类，如.ui-autocomplete-input.ui-inputfield { width : 50px !important;
}

!important 在这里被指出坚持高优先级。

于 2013-02-11T14:08:09.043 回答
2

[multiple]="true"如果我们使用指令，最重要的是解决方案不起作用。另外这个问题也在primeNg论坛上问过，没有解决办法。

如果您不使用上述[multiple]="true"指令，则以下解决方案将起作用。

  • [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"

  • class="p-autocomplete"在样式文件中，您可以将此类定义为 .p-autocomplete{ width: 100%; }

请检查所有这些。

于 2017-06-10T14:01:28.907 回答
1

像这样使用：

<p:autoComplete 
  ...
  style = "width: 100%"
  inputStyle = "width: 100%" />

只需将 100% 更改为您需要的像素大小..

于 2015-08-28T15:12:10.937 回答
0

我知道的最简单的方法是：在页面中添加样式标签，将此类放入其中：.ui-inputfield 具有此属性：宽度：600px；

但请注意，您将更改页面中的所有输入:)

于 2012-09-25T11:48:34.990 回答
0

我使用下面的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 文件中得到了这个

于 2012-09-29T17:19:00.070 回答
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; }

这样，您可以为每个自动完成获得不同的宽度。

于 2018-02-14T15:56:25.640 回答
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;
}

根据您的需要进行调整。

于 2019-01-23T15:02:07.247 回答