CODEWITHSUNDEEP
angularprimeng
igogra
igogra

Reputation: 465

Apply styles in a PrimeNG dialog

I'm having troubles trying to apply styles in a PrimeNG dialog.

I have a component which have a PrimeNG dialog:

<p-dialog header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal">
...
</p-dialog>

I also have a scss file where I have the styles of the component. The background-color of the dialog is transparent but I want to set it to white. So I've tried to apply the style in different ways in my scss file:

.ui-dialog {
    background-color: #fff;
}

Adding styleClass to the dialog and trying to apply styles to it:

<p-dialog styleClass="dialog-filters" header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal">

.dialog-filters {
    background-color: #fff;
}

None of them works. Any idea?

Upvotes: 4

Views: 36158

Answers (7)

C Halsema
C Halsema

Reputation: 61

"primeng": "^14.1.2",

in styles.scss

.p-dialog .p-dialog-header {
  background: red;
  color: #333333;

}

.p-dialog .p-dialog-content {
  background: red;
  color: #333333;
  padding: 1rem;
}


.p-dialog .p-dialog-footer {
  background: red;
  color: #333333;

}

Upvotes: 1

stidl
stidl

Reputation: 9

Update for PrimeNg 12: All the mentioned solutions did not do anything for me or produced weird outcomes.

I had to use styleClass="custom-dialog" on the p-dialog and create the .custom-dialog in my styles.scss file like this:

.custom-dialog { 
max-width: 90%;                     
border: 6px solid white !important;
border-radius:18px !important;
}

To overwrite anything but the width and height property you need to use !important.

Upvotes: 0

Saurabh Rana
Saurabh Rana

Reputation: 3540

@kishor's solution worked for me. Also if you want to apply styles specifically to your dialog box then you can assign it a class using styleClass and use that class in CSS.

<p-dialog position="center" modal="true" styleClass="customDialog"> ... </p-dialog>

// DIALOG BOX
:host {
    ::ng-deep .customDialog {
        background-color: white !important;
        width: 92vw !important;
        box-shadow: 0px 20px 20px #D8DDE680;
        border: 1px solid rgb(231, 231, 231);
    }
}

Upvotes: 0

kishor havaldar
kishor havaldar

Reputation: 39

use the following css method

:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
    background: tomato; 
}

Upvotes: 3

shiva reddy
shiva reddy

Reputation: 457

If you are looking for modifying an existing class from html.

 <p-confirmDialog
                header="Confirmation"
                appendTo="body"
                width="425"
                icon="pi pi-exclamation-triangle"
                >
<style type="text/css">
            .ui-widget-overlay.ui-dialog-mask {
               opacity: 0 !important;
            }
</style>

 </p-confirmDialog>

Also make sure to set: encapsulation value

@Component({
    encapsulation: ViewEncapsulation.None
})

Upvotes: 2

Aravind
Aravind

Reputation: 41533

You can use styleClass property of p-dialog as below,

<p-dialog header="Title" [(visible)]="display" modal="modal" width="300" styleClass="active" >
....

Styles in css file will be as 

.active{
  background-color:red
}

Alternatively, if you are using ui-dialog classes, you should be using them in hierarchy as below

p-dialog .ui-dialog {
  background-color: red;
}

LIVE DEMO contains both methods

Upvotes: 2

Phil
Phil

Reputation: 7566

For a style argument you should use use []. So when you want to apply inline-style to p-dialog that would be for example <p-dialog [style]="{'margin-left':'80px', 'margin-right':'80px'}"></p-dialog>.

I must admit I very confused myself when primeng requires [], nothing or [()], at least when looking at their website, which is not frequently updated. So you better just take a look into their source code on github.

Upvotes: 4

Related Questions