css Question posted in
Some basic documentation can be found here.

Css – Primeng Angular change p-dialog background color

I’ve been struggling to change the background color of the dialog based on a condition.

Stackblitz

changeColor is the variable I am checking if true. Works for changing background color for other tags. Assuming maybe some sort of further override is required for the dialogs. All I want is some sort of overlay on it, changing the color along the lines of this.

I’ve tried inline, global css styling. Even wrapping the dialog content in a div with styling has weird behaviour.

Tags:

2

Answers


  1. 0

    If you want to change the color of the dialog content, you will need to use styleClass to set a class on the dialog and then style the inner elements with .p-dialog-title, .p-dialog-content and .p-dialog-footer.

    Here’s what the code would look like.

    <!-- template -->
<p-dialog
  header="Long Content"
....
  [styleClass]="changeColor ? 'lightgray' : ''"
>

    :host ::ng-deep .lightgray .p-dialog-header {
  background-color: lightgray;
}

    If instead, you want to have a mask layer behind the dialog, you can set [modal]="true" on the dialog to have it show a transparent layer behind the dialog.

    Login or Signup to reply.
  2. 0

    You are just missing the import of the .css file into component:

    @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search