控制 p:autoComplete (primefaces) 中下拉按钮的大小答案

【问题标题】：Controling the size of dropdown button in p:autoComplete (primefaces)控制 p:autoComplete (primefaces) 中下拉按钮的大小
【发布时间】：2012-04-23 12:54:31
【问题描述】：

我在我的 jsf 2 Web 应用程序中使用 primefaces 3 来显示建议列表：p:autoComplete

 <p:autoComplete
     value="#{articleBean.unite}"
     completeMethod="#{articleBean.autocompleteUnite}"
     var="item" itemLabel="#{item.code}" itemValue="#{item}"
     converter="#{articleBean.uniteConverter}" 
     dropdown="true"/>

属性 dropdown="true" 在输入项旁边添加一个下拉按钮：

问题在于下拉按钮的大小：它看起来很大，我无法更改它的大小。

是否有一个样式类可以控制它的外观可能是样式元素，请指导我。

【问题讨论】：

标签： jsf autocomplete size primefaces drop-down-menu

【解决方案1】：

<button class="ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only"         type="button" style="**width: 100px;**">
 <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
 <span class="ui-button-text"></span>

'ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only' 这个类可能会对你有所帮助。

【讨论】：

根据您的回复，我在 primefaces 中寻找控制自动完成下拉菜单的类：它是 autocomplete.css 中的 ui-autocomplete-dropdown .ui -autocomplete .ui-autocomplete-dropdown { 光标：指针；宽度：16px；高度：100%；位置：绝对；右：0；顶部：0；填充：0 3px；边距右：-24px； } 我怎样才能覆盖这个行为并改变它的值？

【解决方案2】：

在您的页面中将此代码复制到<head>：

<style>
button.ui-button-icon-only {width: 1em} 
</style>

我希望这对你有用。

【讨论】：

复制到 CSS 会更好 ;-)