Comment faire pour supprimer le rembourrage de p:panneau de contenu

J'ai un <p:panel> avec l'id X et je veux enlever le rembourrage de son contenu X_content le code HTML généré pour le panneau de contenu est:

<div id="X_content" class="ui-panel-content ui-widget-content"> et l'élément s'affiche dans chrome developer tools pour avoir un rembourrage:

padding:0.5em 1em;

j'ai fait un intégré à la feuille de style pour remplacer celui de primefaces comme suit:

<h:head>
  <style>
       .ui-panel-content, .ui-widget-content{
           padding:0px;
       }
  </style>
</h:head>

mais je n'ai pas de travail, le rembourrage existe toujours, quelqu'un pourrait-il m'aider?

peut-être que votre sélecteur n'est pas assez "fort" pour remplacer..

OriginalL'auteur Java Player | 2013-05-10

  1. 8

    Votre sélecteur CSS

    .ui-panel-content, .ui-widget-content {
    ...
}

    signifie en gros: "Sélectionner tous les éléments ayant ui-panel-content ou ui-widget-content classe".

    Cependant, le rembourrage est défini dans PrimeFaces CSS par défaut par ce sélecteur CSS

    .ui-panel .ui-panel-content {
    ...
}

    Comment faire pour supprimer le rembourrage de p:panneau de contenu

    ce qui signifie fondamentalement "Sélectionner tous les éléments ayant ui-panel-content classe, qui est un enfant d'un élément ayant ui-panel classe" qui est selon Cascade CSS règles une plus forte sélection. Cela a donc une plus grande priorité que votre sélecteur CSS. Et ce, indépendamment de l'ordre de déclaration de votre style de classe (de l'ordre de déclaration n'a d'importance que les boutons ont une force égale).

    Lors de la substitution PrimeFaces CSS par défaut, vous devez fournir un sélecteur de au moins la même force ou plus. Dans votre cas particulier, il suffit d'utiliser le même sélecteur si vous avez l'intention d'appliquer le style à l'échelle mondiale:

    .ui-panel .ui-panel-content {
    padding: 0;
}

    Veuillez noter que lors de l'utilisation de <style> dans <h:head>, alors il serait encore être remplacée par PrimeFaces CSS par défaut, parce que c'est de l'auto-inclus en fin de tête. Plutôt déplacer le <style> à <h:body>, ou, mieux, de le mettre dans son propre fichier CSS qui vous comprennent par <h:houtputStylesheet> à l'intérieur de <h:body>.

    Voir aussi:

    j'ai appliqué la feuille de style comme suit, mais le rembourrage en reste un: <h:head> <style> .l'interface utilisateur du panneau .interface utilisateur-panneau-content { padding: 0; } </style> </h:head>
    Ensuite, votre style est été déclaré avant de la PrimeFaces par défaut. Veuillez consulter la 1ère "Voir aussi" lien pour la réponse.
    le problème est que ma page n'avons pas <h:body> c'est la composition de la page, à l'égard de ces où mettre le <h:outputStylesheet name="style.css" /> ?
    Il suffit de créer un nouveau modèle qui s'étend de votre maître modèle et l'utiliser à la place. Avantage supplémentaire est que vous n'avez pas besoin de répéter les <h:body> sur tous les modèles des clients ainsi. SEC!
    quoi de mettre des <h:body> après le <ui:define name="contenu"> ? et de mettre le <h:outputStylesheet name="style.css" /> après cela ?

    OriginalL'auteur BalusC