6

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?

eidsonator
  • 1,319
  • 2
  • 11
  • 25
Eslam Hamdy
  • 7,126
  • 27
  • 105
  • 165

1 Answers1

12

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

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • i applied the style sheet as follows but the padding still remains: – Eslam Hamdy May 10 '13 at 17:35
  • Then your style is been declared before the PrimeFaces default one. Please check the 1st "See also" link for the answer. – BalusC May 10 '13 at 17:36
  • the problem is that my page have no its a composition page, regarding these where to put the ? – Eslam Hamdy May 10 '13 at 18:12
  • 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 `` over all template clients as well. [DRY](http://en.wikipedia.org/wiki/Don't_repeat_yourself)! – BalusC May 10 '13 at 18:31
  • what about placing after the ? and putting the after it ? – Eslam Hamdy May 10 '13 at 19:14
  • Just do it according the documentation. If you stucks, press "Ask Question". This is completely unrelated to the initial question. – BalusC May 10 '13 at 19:16