Geek asks and answers

PrimeFaces: how to override CSS class

When creating a button, the class is always applied ui-corner-all. I tried the following:

<p:commandButton id="like" styleClass="ui-corner-right" />

but it didn’t work. In Firebug I've seen ui-corner-all, and ui-corner-right:

<div id="form1:like" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-corner-right">

UPDATE 1:

Following the help of JMelnik, I was finally able to change the style ui-corner-allto ui-corner-rightby adding the following script:

<style type="text/css">
    #myForm\:likeButton .ui-corner-all {
        border-radius: 6px 0px 0px 6px !important;
    }
</style>

and wrap <p:commandButton>inside <h:panelGroup>as follows:

<h:form id="myForm">
    <h:panelGroup id="likeButton">
        <p:commandButton />
    <h:panelGroup>
</h:form>

UPDATE 2:

Thanks to BalusC's suggestion, the following solution should be better:

<style type="text/css">
    .likeButton .ui-corner-all {
        border-radius: 6px 0px 0px 6px !important;
    }
</style>  

<h:panelGroup styleClass="likeButton">
    <p:commandButton />
<h:panelGroup>

Yours faithfully,

+5
source share
1 answer

Use the standard way to override CSS.

Include * .css on your page where you override the ui-corner-alland classes ui-corner-right.

.ui-corner-all {
    //ovverides to nothing, you can also define any properties you want here
}

.ui-corner-right {
    //define properties  which would override unwanted behaviour
}

css, .

+5

More articles:


All Articles