Primefaces style de la classe du composant avec les CSS

Comment puis-je modifier les propriétés d'un composant à l'aide de CSS?

Disons que j'ai deux boutons:

<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">

Je veux que tous mes boutons ont font-size: 14px; j'ai donc ajouté cette règle:

.ui-button .ui-button-text{
   font-size:14px;
}

Mais mon smallButton devrait avoir la taille différente, j'ai donc ajouté:

.smallButton{
   font-size:11px;
}

Malheureusement cela ne fonctionne pas. Ce dernier est réalisé en HTML:

<button class="ui-button ui-widget ui-state-default ui-corner-all
    ui-button-text-only smallButton" (...)>
    <span class="ui-button-text ui-c">MY TEXT</span>
</button>

Le texte sur ce bouton est stil 14px taille. Comment doit-CSS ressemble à toutes mes smallButton font-size: 11px ?

OriginalL'auteur Demiurg | 2014-01-04

  1. 9

    Votre problème est lié à l'ordre de chargement de tous les CSS. Les CSS sont en cascade feuilles de style. Donc, si vous voulez que votre .smallButton style à appliquer, il doit être le dernier dans le css de la chaîne, afin de remplacer une précédente correspondance des styles.

    Chèque à l'ordre de la CSS (voir le source généré en-tête dans votre navigateur)

    Si vous voulez que votre CSS pour la dernière, vous pouvez l'utiliser à l'intérieur de votre page ou d'un modèle:

    <f:facet name="last">
  <h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>

    Cela évite la surconsommation de !important tag, qui fonctionne soit.

    MODIFIER

    Cela fonctionne très bien pour moi sur chrome. Chrome indique une taille de police est 11px pour ui-button-text embeded durée, et affiche le premier bouton plus petit que le second, de la police de caractères de taille est 14px.

    <style>
.ui-button-text{
   font-size:14px;
}
.smallButton .ui-button-text {
   font-size:11px;
}
</style>

<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>

    Veuillez également noter que le code html généré boutons n'ont aucun ui-button classe.

    Je l'ai déjà fait en sorte que mon yourstyles.css est chargé en dernier. En fait, quand j'ai coché la case dans google chrome, je peux voir que smallButton a font-size: 11px mais quand j'ai inspecté le texte sur ce bouton, j'ai remarqué que cette propriété est totalement ignorée et la taille de police est pris de .ui-button .ui-button-text. Je pense que j'ai besoin de quelque chose comme .smallButton .ui-button .ui-button-text mais cela ne marche pas.
    <f:facet name="last"> n'est pas pertinent pour <h:body>. Se débarrasser d'elle.
    Mettre soit dans <h:body> ou dans <h:head><f:facet name="last">. Voir aussi stackoverflow.com/questions/8768317/...
    Question de suivi pour @BalusC ... j'ai eu ce travail avec Primefaces 4 en le mettant dans le <h:body> section. Après la mise à niveau de Primefaces 5.1, mon css ne semble pas être chargé dernier plus. J'ai essayé de le mettre dans la <h:body><f:facet name="last">, mais avec les mêmes résultats. Avez-vous entendu parler de cela avec PF 5.1?
    J'ai été en mesure de trouver le problème... le css avec PF 5.1 ajoute une classe à l' <td> cellules -- quelque chose qui n'existait pas dans la version 4.0. Après avoir fait mon css plus spécifique, il est maintenant à la recherche de ce qu'il était avant.

    OriginalL'auteur Stephane Lallemagne

  2. 3

    J'ai trouvé la solution à mon problème. Tout ce que je nedd est-ce:

    .smallButton.ui-button-text-only .ui-button-text {
    font-size: 11px;
}

    Alors maintenant ui-button-text-only .ui-button-text s'appliquent uniquement à la smallButton. Je l'ai essayé avant, mais avec un espace après .smallButton donc il n'avait pas de travail. Maintenant, il fonctionne correctement. Merci pour votre answerws.

    OriginalL'auteur Demiurg

  3. 2

    PrimeFaces remplace votre css avec les règles par défaut pour le formulaire parent.

    Vous pouvez définir votre css pour la forme comme ceci:

    form .smallButton{
   font-size:11px;
}

    ou vous pouvez utiliser le !important mot-clé:

    .smallButton{
   font-size:11px !important;
}

    Voir aussi:

    J'ai déjà essayé ça. Veuillez vérifier mon commentaire de @StephaneLallemagne anserw pour plus d'informations.

    OriginalL'auteur unwichtich