caroso1222 / notyf

👻 A minimalistic, responsive, vanilla JavaScript library to show toast notifications.

Home Page:https://carlosroso.com/notyf/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Adjust notification size with javascript

hmz777 opened this issue · comments

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.
chrome_0uhLcWWhFY

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:
8HnVttDoLF

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;
  }
}