CODEWITHSUNDEEP
cssangularprimeng
realist
realist

Reputation: 2375

PrimeNg styleClass not change style of p-panel

I am using primeNg. My .html and .scss file like below. But I can't give any styleClass to p-panel. What is wrong in my code?

.html file

<p-panel header="Student Info" styleClass="test">
    <div class="ui-g">
      <div class="ui-g-12 ui-md-3">
        <div class="ui-g-12">
          <b>Student</b>
        </div>
       </div>
  </p-panel>

.scss file

.test {
  margin-top: 50px;
}

Upvotes: 3

Views: 13938

Answers (3)

Phil
Phil

Reputation: 375

The way I've done this (to remove the bottom padding in the p-panel-content - in this case) is in the html add a new style class p-panel-no-padding-bottom to the styleClass of the p-panel I want to affect the style of..

<p-panel header="Panel Header" styleClass="p-panel-no-padding-bottom">

And either

  1. in the global css

.p-panel-no-padding-bottom .p-panel-content {
  padding-bottom: 0;
}

  1. or in the app component css

:host /deep/ .p-panel-no-padding-bottom .p-panel-content {
  padding-bottom: 0;
}

Upvotes: 0

Afshar
Afshar

Reputation: 307

One more solution is to use the parent element of <p-panel> element. So for, 

<div class="panel-container">
   <p-panel>
     ..
   </p-panel>
 </div>

We could simply have a class as:
.panel-container div.ui-panel-titlebar { .. }
and/or
.panel-container div.ui-panel-content { .. }
BTW to fix @HasanOzdemir's problem we could simply add a little padding to the top of parent element ;-)

Upvotes: 1

Martin Parenteau
Martin Parenteau

Reputation: 73741

To apply a CSS style to a child component, use ::ng-deep. See this stackblitz for a demo.

:host ::ng-deep .test {
  margin-top: 50px;
}

According to Angular documentation:

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation.

... ::ng-deep should be preferred for a broader compatibility with the tools.

An alternative solution is to set the view encapsulation of the component to ViewEncapsulation.None.

Another alternative is to define the style globally in styles.css, as shown for the second panel in the stackblitz.

Upvotes: 5

Related Questions