I have toastr message notification using ngx-toastr from npm (my current stack is Angular 9)
Is there a way to alter the max-width for the messages since it is causing the message-text to wrap.
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true }
).
I want the displayed also to be in the first line
You could use the native classes, i.E. toast-top-full-width
or toast-bottom-full-width
<toaster-container toaster-options="{
'time-out': 2500,
'close-button':false,
'position-class':'toast-bottom-full-width'
}"></toaster-container>
As an alternative you could also apply your custom class via position-class
and define the class in your CSS.
<toaster-container toaster-options="{
'time-out': 2500,
'close-button':false,
'position-class':'my-own-toastr-class'
}"></toaster-container>
CSS:
.my-own-toastr-class {
width: 100%;
}
Update after clarifications from the comments:
From the docs:
Setting Individual Options
success
,error
,info
,warning
take (message, title, ToastConfig) pass an options object to replace any default option.
Example:
this.toastrService.error('everything is broken', 'Major Error', {
timeOut: 3000,
});
So in your case for example that would be :
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'toast-bottom-full-width'
}
).
Or with your own custom class:
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'my-own-toastr-class'
}
).
Please see more info under OPTIONS at https://www.npmjs.com/package/ngx-toastr.