The default size of a <p-toast>
window is very small, and I would like to be able to adjust it, because my toast messages might be very long. I also need to be able to customize the style of the toast window as well, but I can't seem to get the CSS to work.
this.messageService.addAll([
{key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Very very very long task message to display number one that user needs to see blah blah blah'},
{key: 'tc', severity: 'success', summary: '30 Nov 2020', detail: 'Very very very long task message to display number two that needs to be bigger and more prominent'}
]);
I have tried a couple of methods based on the documentation.
inline html
<p-toast position="top-center" width="90%" key="tc"></p-toast>
using ngStyle
<p-toast position="top-center" [ngStyle]="{ 'width': '90%' }" key="tc"></p-toast>
CSS in component
@Component({
selector: 'task',
templateUrl: './task.component.html',
styleUrls: ['./task.component.css'],
styles: [`
:host ::ng-deep .custom-toast .ui-toast-message {
color: #ffffff;
width: 100%;
background: #FFD07B;
}` ],
providers: [MessageService]
})
<p-toast position="top-center" style="custom-toast" key="tc"></p-toast>
adding to style.css
.custom-toast {
width: 90%;
background: #FFD07B;
}
:host ::ng-deep .custom-toast .ui-toast-message {
width: 90%;
background: #FFD07B;
}
<p-toast position="top-center" class="custom-toast" key="tc"></p-toast>
none of which worked.
Did I make a mistake somewhere in my syntax? How exactly do I adjust the style (color, font, especially the sizes) of the Toast window?
EDIT: Here is a stackblitz link with all the stuff I've tried. Not sure if I did it correctly.
So after more tinkering, I finally figured out the solution. I needed to add an additional reference to the toast container in styles.css.
The html remains mostly the same.
<p-toast class="custom-toast"></p-toast>
Styles.css changed to add references to the toast container.
// centers the toast window to the middle of the screen
.custom-toast .ui-toast {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
// adjusts font, color and other elements of the toast window if needed
.custom-toast .ui-toast-message-content {
font-family: 'Courier New', Courier, monospace;
background: #FFD07B;
}