PrimeFaces: comment surcharger la classe CSS

Quand un bouton est créé, la classe ui-corner-all est toujours appliqué. J'ai essayé le suivant:

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

mais il ne fonctionne pas. Sur Firebug, j'ai vu les deux ui-corner-all et 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">

Mise à JOUR 1:

Suivant l'indice de JMelnik, j'ai enfin réussi à changer le style de ui-corner-all à ui-corner-right en ajoutant le script suivant:

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

et envelopper le <p:commandButton> à l'intérieur de <h:panelGroup> comme suit:

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

Mise à JOUR 2:

Grâce à BalusC à la suggestion de la solution suivante devrait être mieux:

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

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

Cordialement,

essayez de charger votre fichier css à la fin, par exemple dans le <h:body> et aussi , assurez-vous de remplacer la nécessaire attribut qui sont définies par ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left INMO dans votre cas, vous feriez mieux de ne pas essayer de manipuler le css js
Le \: ne fonctionne pas dans MSIE. Ce bouton ne peut guère être totalement unique dans votre point de vue. Plutôt l'utilisation d'un nom de classe.
Connexes: stackoverflow.com/questions/8768317/... et stackoverflow.com/questions/5878692/...

OriginalL'auteur Mr.J4mes | 2012-06-21

  1. 5

    Utiliser une norme CSS remplacent.

    Comprennent un *.css dans votre page, où vous redéfinir ui-corner-all et ui-corner-right classes. 

    .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
}

    Vous pouvez également appliquer de la classe css qui l'emporterait indésirables propriétés.

    Hmm... vous voulez dire que je dois remplacer les propriétés de ui-corner-all avec celle de ui-corner-right? Est-il possible de supprimer le ui-corner-all de l'HTML généré?
    Vous pouvez utiliser javascript/jquery pour "removeClass('ui-corner-all")" sur les éléments qui ont. C'est un peu brouillon mais et dépend des utilisateurs ayant activé javascript. Vous pouvez également utiliser firebug pour saisir les styles CSS qui "ui-corner-all" s'applique, puis écraser le tout dans votre propre feuille de style CSS. Il suffit de répéter ce que JMelnik dit ici.
    merci je vais essayer maintenant 🙂
    vérifier la mise à jour.
    quelle solution avez-vous utilisé?

    OriginalL'auteur JMelnik