notyf
notyf copied to clipboard
Adjust notification size with javascript
As you can see from the photo below, large content doesn't play well with notyf because the notification container's width is limited to 400px.
Which is fixable using the className
option, but now the ripple effect is broken because it's also set to 400px
Can we add an option to specify the max-width
of the container which would also be applied to the ripple element?
Something like this:
notyf.error({
duration: duration,
position: position,
dismissible: dismissible,
message: ErrorMessage,
max_width: '50em'
});
The code below (scss) fixes the problem by overriding default styles:
//A custom class applied via className option.
.toast-custom-notyf {
max-width: 50em !important;
.notyf__ripple {
height: 50em;
width: 50em;
}
}
And renders the following result:
And great job on this library, i love it!
A great idea, however I had to use the following scss, to get the same result as above...
// Overriding the max width of the Notyf alert pop up.
.notyf__toast {
max-width: 50em !important;
.notyf__ripple {
height: 60em;
width: 60em;
}
}