Question

I am having a bit of a problem styling the commandbutton of the primefaces 3 application.

My common CSS has this style

body {
    font-size: small;
}

and my primefaces button has this

<p:commandButton value="Search" ajax="false"  style="padding:0px;"/>

I wanted to remove some padding on the button itself so I have set its style as above.

But nothing is happening?

Is there a way to remove the excess padding on command button?

Thanks

Answer 1

The css class that is responsible for the padding is .ui-button-text. You can verify it with Firebug or some other tool.

You could override this default style with the following code snippet. Put it in the header section of your page:

<style type="text/css">
  .ui-button-text {
         padding: 0px !important;
  }
</style>