notyf icon indicating copy to clipboard operation
notyf copied to clipboard

Adjust notification size with javascript

Open hmz777 opened this issue 4 years ago • 1 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!

hmz777 avatar Oct 16 '20 16:10 hmz777

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

iain-tel avatar Mar 31 '21 16:03 iain-tel