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?

Marked

maybe your selector isnt enough "strong" to override.. – Arlenaarlene

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

Clyte

i applied the style sheet as follows but the padding still remains: <h:head> <style> .ui-panel .ui-panel-content { padding: 0; } </style> </h:head> – Marked

Then your style is been declared before the PrimeFaces default one. Please check the 1st "See also" link for the answer. – Clyte

the problem is that my page have no <h:body> its a composition page, regarding these where to put the <h:outputStylesheet name="style.css" /> ? – Marked

Just create a new template which extends your master template and use it instead. Additional advantage is that you don't need to repeat the <h:body> over all template clients as well. DRY! – Clyte

what about placing <h:body> after the <ui:define name="content"> ? and putting the <h:outputStylesheet name="style.css" /> after it ? – Marked

Just do it according the documentation. If you stucks, press "Ask Question". This is completely unrelated to the initial question. – Clyte