Skip to content
New issue

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

Adjust notification size with javascript #89

Open
hmz777 opened this issue Oct 16, 2020 · 1 comment
Open

Adjust notification size with javascript #89

hmz777 opened this issue Oct 16, 2020 · 1 comment

Comments

@hmz777
Copy link

hmz777 commented Oct 16, 2020

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!

@iain-tel
Copy link

iain-tel commented Mar 31, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants