Size of p:commandButton

[Skarn]

I'm trying to have a submit and reset button centered within a form. As part of this I insert the buttons within a div that is inline - making the div the same size as its content (ie the two buttons). Then I can center the div within the form.

However, I noticed an unexpected behavior with p:commandButton vs h:commandButton. The difference being that the div's height only incases the the p:commandButton's text and not the whole button. Try this code to see the difference.

Code with h:commandButtons:

Code: Select all

            <div class="debug_border" style="display: inline;">
                <h:commandButton styleClass="" value="Submit" type="submit"/>
                <p:commandButton style="" styleClass="" value="Reset" type="reset"/>
            </div>

Code with p:commandButtons:

Code: Select all

            <div class="debug_border" style="display: inline;">
                <h:commandButton styleClass="" value="Submit" type="submit"/>
                <p:commandButton style="" styleClass="" value="Reset" type="reset"/>
            </div>

Notice that in the p:commandButton case that the div ends up not being too short. Also, if you make the div not inline then the div does end up being tall enough - however, this causes the width to be based on the size of the div's parent and not based on the buttons.

This isn't a huge problem. I'm just trying to understand the difference.

Here is the definition of "debug_border" just to show the impact on the div.

Code: Select all

.debug_border {
    border-color: #cd0a0a;
    border-style: dashed;
    border-width: 1px;
}

[duke_duquejr]

use font-size.

Code: Select all

<p:commandButton value="Example" style="font-size: 85%"/>