我们如何调整 p:命令按钮的大小或宽度

Question

我的工作环境是：Primefaces 4.0 with JSF 2.0我的目标是在表单中设置相同的命令按钮宽度。我发现style="font-size:10px"设置按钮的字体大小，这会更改按钮的标签大小。我想更改按钮的大小

Answer 1

您可以将命令按钮中的样式属性与 css 属性宽度和高度一起使用。

<p:commandButton id="button" value="Click"                              
                 actionListener="#{myBean.doAction}" 
                 style="width:100px;height:100px"/>

要为页面上的所有命令按钮设置相同的值，请将以下 css 添加到 jsf 页面。

       .ui-button{
            width:100px;
            height:100px;
        }

Answer 2

为此，您必须使用 CSS，例如，我不喜欢按钮及其边框之间的空间太大（当 2 或三个按钮并排时看起来很大，或者它们看起来更大，周围有文本），所以，我首先使字体变小（旧的字体大小：.8em），然后覆盖按钮的填充（是的， 按钮中的填充很大，至少对我来说），例如：

.ui-button-text-only .ui-button-text {
    padding: .1em .5em;
}

Answer 3

我建议使用 style="min-width： 15em;"，因为按钮可能位于 PanelGroup 内，width 属性将不起作用。

<h:panelGrid columnClasses="column_left" columns="2" style="padding-top:8px;" styleClass="acciones">
 <h:panelGroup>
 <p:commandButton update="@all"  style="min-width: 15em;"> </p:commandButton>
 </h:panelGroup>                    
 </h:panelGrid>