PrimeFaces自动完成更改默认大小

Question

我试图改变autoComplete（primefaces 3.3）的大小，我尝试了以下所有选项，但大小保持不变。

size="600"
Style="width:600px;"
StyleClass > css file with width:600px;

但它们都没有增加尺寸，所以我该怎么办呢。

注意：我注意到如果我指定（width> PanelGrid大小），则面板网格大小会自动更改，但autoComplete仍然是默认大小。

更新：我的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">

Answer 1

我使用inputStyle属性更改了Primefaces 5.2中AutoComplete的默认大小。

例：

inputStyle="width: 100px"

Answer 2

只需要改变size ;

     size="30"

    <p:autoComplete id="yourId" value="#{YourBean.value}" completeMethod="#{YurBean.complete}" size="30"/> 

Answer 3

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

这里注意到重要的是坚持要高度重视。

Answer 4

如果我们使用[multiple]="true"指令，首先解决方案不起作用。 此外，这个问题也在primeNg论坛中提出并且没有解决方案。

如果你不使用上面的[multiple]="true"指令，下面的解决方案将起作用。

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

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

请检查所有这些。

Answer 5

我知道的最简单的方法是：在页面中添加一个样式标记，将此类放入其中：.ui-inputfield，具有以下属性：width：600px;

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

Answer 6

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

Answer 7

使用这样：

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

只需按像素大小更改100％即可。

Answer 8

这对我来说用[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获得不同的宽度。

Answer 9

我知道很久了！ 在挖掘样式之后，这些在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;
}

根据您的需要调整。