How to remove padding from p:panel content

Question

I have a <p:panel> with id X and i want to remove the padding from its content X_content the generated HTML for the panel content is:

<div id="X_content" class="ui-panel-content ui-widget-content"> and the element appears in chrome developer tools to to have a padding:

padding:0.5em 1em;

i made an embedded style sheet to override the one in primefaces as follows:

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

but i didn't work, the padding still exists, could anyone help me?

Answer 1

Your CSS selector

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

basically means: "Select all elements having ui-panel-content or ui-widget-content class".

However, the padding is definied in PrimeFaces default CSS by this CSS selector

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

which basically means "Select all elements having ui-panel-content class which is a child of an element having ui-panel class" which is according CSS cascade rules a stronger selector. This has thus higher precedence than your CSS selector. This is regardless of the declaration order of your style class (the declaration order only matters when the selectors have an equal strength).

When overriding PrimeFaces default CSS, you should provide a selector of at least the same strength or a stronger one. In your particular case, just use the very same selector if you intend to apply the style globally:

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

Please note that when using <style> in <h:head>, then it would still be overridden by PrimeFaces default CSS, because it's auto-included in end of head. Rather move the <style> to <h:body>, or, better, put it in its own CSS file which you include by <h:houtputStylesheet> inside <h:body>.

See also:

• How do I override default PrimeFaces CSS with custom styles?
• CSS selector syntax