We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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
className
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:
max-width
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!
The text was updated successfully, but these errors were encountered:
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; } }
Sorry, something went wrong.
No branches or pull requests
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 400pxCan we add an option to specify the
max-width
of the container which would also be applied to the ripple element?Something like this:
The code below (scss) fixes the problem by overriding default styles:
And renders the following result:
And great job on this library, i love it!
The text was updated successfully, but these errors were encountered: