How to remove padding from p:panel content

css jsf jsf-2 primefaces facelets

16,001

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

enter image description here

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

Eslam Hamdy

Senior engineer with +9 years experience in java ecosystem, have one plus year experience in crafting and managing agile teams, has a passion for nature, mountain biking, swimming, traveling, tensegrity and coding.

Updated on June 04, 2022

Comments

Eslam Hamdy almost 2 years
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?
Eslam Hamdy almost 11 years

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>
BalusC almost 11 years

Then your style is been declared before the PrimeFaces default one. Please check the 1st "See also" link for the answer.
Eslam Hamdy almost 11 years

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" /> ?
BalusC almost 11 years

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!
Eslam Hamdy almost 11 years

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

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