How can we adjust p:commandbutton size or width

Question

My working environment is: Primefaces 4.0 with JSF 2.0 My aim is to set width of command button same in the form. I find style="font-size:10px" to set button's font size which is changing button's label size. I want to change button's size

Answer 1

You can use the style attribute in the commandButton with the css properties width and height.

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

To set the same value for all the commandButtons on a page,add the following css to your jsf page.

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

Answer 2

For that you have to play with the CSS, for example, i don't like that much space between buttons and their borders (it looks so big when are 2 or three buttons side by side, or they look bigger with text surround them), so, I first make the font smaller (the old font-size: .8em) and then a override the padding of the button (yes, the padding is huge in the buttons, at least for me), something like:

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