I want to have a message with new lines in it, but they are rendered as whitespace in the toast. Can you render these as
instead. For backwards compatibility, this should have a config setting to enable it (false by default).

I've noticed iziToast title and message were fading out when called.
Then I changed the order of css links and it normalized, however iziModal assumed the behavior of iziToast.

Maybe same class used to both?

Uncaught RangeError: Maximum call stack size exceeded
at y (:6:3644)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)

Somehow the toast is wider than the screen width on narrow screens and so the close icon gets cut off.

The .js-files doesn't seem to be retrieved making none of the demos testable

I was wondering if there was a way to pass in a component variable to the message parameter.
This is what I am looking for [message]="'{{error}}'".

Thanks

Is there an option to close on Escape key press?
Thank you

Is it possible to add html in messages?

Hello,

When invoking iziToast with the property resetOnHover:true value, the following error occurs.

iziToast.info({
    title: 'Hello',
    message: 'Welcome!',
  resetOnHover: true
});

Uncaught RangeError: Maximum call stack size exceeded

Same error is reproduced in the following call:

iziToast.info({
    title: 'Hello',
    message: 'Welcome!',
  resetOnHover: true,
  pauseOnHover: false
});

The version used is the release on tag v1.1.3

Any thoughts what could be causing it?

Thank you.

How to send it to front or margin, padding from top ?

npm install installs the v1.1.0

Hello !
Is it possible to set max-with of the toast?
because sometimes the title and message are couple of words so it make the toast so long....

Is-it possible ?

thanks

Olá, quando chamo um toast, e ele é iniciado, os textos desaparecem.
Se eu removo a classe .slideIn dos textos e deixo a opacidade 1, eles retornam. O CSS do slidein está causando este problema.

.iziToast.slideIn, .iziToast .slideIn { animation: b 1s cubic-bezier(.16,.81,.32,1) both }

I know that is possible to change the color of the icon, but what about the close icon, i'd like to turn it white.

We downloaded the current js and css files and tried using the dark theme.
This is the output:

Doesnt look dark to me :P

The z-index is wrongfully inserted on the container with the class iziToast it should be inserted on the div containing the class iziToast-wrapper

Situation:
When you show a toast with/without the close (x) button and without any other button or message, the title and icon of the toast are misaligned.

Samples:

  iziToast.warning({
    timeout: 5000,
    title: 'Some message here.',
    position: 'centerTop',
    close: false
  });

  iziToast.success({
    timeout: 5000,
    title: 'Some message here.',
    position: 'centerTop',
    close: true
  });

Using the iziToast.settings default this seems to happen to any kind of toast.

edit: I just noticed, if I include a message in the toast, the misalignment doesn't happen.

Opa, boa tarde,

Está ocorrendo algum erro no npm, o modulo do iziToast não ta sendo encontrado...

https://runkit.com/5843226183edc1001385297d/5843226183edc1001385297e

Pode ver ai no teste online do npm.

Abçs

[Question] How to create yes/no or more button like demo ? i see custom 1, custom 2 but no demo code.

Example structure for the "Buttons" object.

The sample structure for the "buttons" object does not appear to be in an acceptable pattern for javascript.

Take the example from the official iziToast page.

^^ may help

In Chrome 59 on macOS 10.12.5, iziToast 1.1.4 displays toasts incorrectly

Despite the CSS rule on .iziToast: max-height: 54px, the height of the element is 71px.

This is because the default box-sizing value is content-box, so the height of the content is being set to 54px regardless of borders and margins which may add height. The most appropriate solution is to set the box-sizing property of .iziToast to border-box.

Result after implementing this change:

In my settings I set the zIndex to be the highest zIndex in my app

iziToast.settings({ position: 'bottomRight', timeout: 4000, zIndex: 9999999999 });

This gets ignored and I see the div

<div class="iziToast-wrapper iziToast-wrapper-bottomRight" style="z-index: 999999;">...</div>

Balloon takes, the original color for show, success, error... etc.

But if you customize backgroundColor option, the Balloon (little triangle) continue adopting original color.

Request:

• OPTA: IF exist a custom background Color, take custom color.
• OPTB: Add "backgroundBalloonColor" option

thank you :)

When both iziModal and iziToast are used on the same page, the iziModal CSS animations are affected by the iziToast CSS.

Oi marcelo !

ha possibilidade de suportar o izitoast tendo como target um input/select .... etc !

Obrigada

when i run the script together with the library,
the timeout of the alerts prolongs almost x4

so timeout: 1000 will result to almost 4seconds

if i use 250 to create a 4 second timeout, the animation on the loading bar doesn't look as fluid as before.

Quando o iziToast é chamado, o balão não aparece mais o texto.
Ate uns dias estava funcionando, e o codigo nao foi mudado, entao sei que não é erro meu.

Please, consider using semver versioning, to avoid possible misbehavior with package managers. Currently yarn is unable to fetch latest version because of trailing "b".

I am trying to include izitoast in my vue js application. And I have declared the plugin in my dev,base and prod conf file. I have included the imports in my main.js file like this import '../node_modules/izitoast/dist/js/iziToast.min.js'
import '../node_modules/izitoast/dist/css/iziToast.css'. And used izitoast in my mounted hook like $(this.$el).find('.addbtn').iziToast.success({ title: 'OK', message: 'Successfully inserted record!', });. I get error "Cannot read property success of undefined"? Can you help with this?
PS: I have also tried using the import izitoast from 'izitoast' and Vue.use(izitoast)

I don't know if this is a issue or is by design, but, when i call instance.hide() from a button shouldn't the global onClose be also called ?

whenever i am using toast with this
iziToast.show({    title: 'Hey',    message: 'What would you like to add?'});

when toast open little large height
after second toast height normal as per showing website

please help
please below attachment screenshot

First toast open with little bit large size

after second toast goes normal size

Not sure how big of a problem it is, but bubles is misspelt:

var event = new CustomEvent(PLUGIN_NAME+'-close', {detail: settings, bubles: true, cancelable: true});

just noticed because the syntax highlighter complained.

Hello, is it possible to pass multiple classes on the settings object? Right now it isn't possible, it'd be cool to be able to add N classes to a specific toast.

Also If we could add an ID to the toast element, that'd be helpful as well.

{
	id: "toast1234", // <- Would be cool
        class: "someClass anotherClass thirdClass", // <- Highly desired
	title: "title",
	message: "some text",
	layout: 2,
	timeout: 8000,
	animateInside: false,
	transitionIn: 'fadeInLeft',
	transitionOut: 'fadeOutRight',
	transitionInMobile: 'fadeInUp',
	transitionOutMobile: 'fadeOutDown',
}

Marcelo, não vi nada sobre licenças, sobre qual você irá manter? Vi no site que é free, mas em que condições? Posso usar tranquilamente em meus projetos independente da área de atuação inclusive uso comercial? Abraço.

Very nice design and animations! I would love to see an option for a toast to collapse to just it's icon on (auto-)closing, allowing user to re-open it on click. I guess the icon could float on the edge of the screen on larger screens, respecting the existing position parameter (bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter). Some animation could make it clear to the user that the icon came out of the collapsed toast. What do you think?

Love the plugin but is there any reason for console.log('closed1'); and console.log('closed2'); being still in the code?

Olá Marcelo,

Novamente parabéns!

Novamente porque te dei os parabéns no facebook, e ainda relatei algumas coisas que fiz em outro plugin para adaptar as minhas necessidade. No facebook você diz que aceitaria sugestões, pois bem, vou aqui apresentar algumas que pelo menos eu estou precisando,

1: Poder personalizar as cores do título, tanto de fundo quanto dele mesmo (sem usar class)
2: Poder personalizar as cores da mensagem, tanto do fundo quanto da mensagem (sem usar class)
3: Ter opção para não possibilitar copiar o texto (não me pergunte pq preciso disso, pq eu também não sei rsrsrs). Mas esta aqui acho que não faz muito sentido implementar não, mas talvez vc goste da ideia.

Mais uma sugestão.

No evento onClose, enviar algo para informar se foi fechado quando tempo finalizou ou quando por ter clicado no botão fechar.

Hi, Great tool!

One problem, in IE11 (Chrome works fine) the toast starts small (good) but after a second it takes on the whole height of the screen. I'm using the newest version: 1.1.2
After I click on the button the notification starts on the right bottom like it should.
But than, after a second, it expands over the whole height to the top. (Untill time's up and it dissapeares.)
Anything wrong with the following:

Best regards,
Simon

when i am using ie9, it show error 'Unable to get undefined or null referenced attributes "add" '

I'm using typescript and commonjs module loading to try to bring iziToast (1.0.2-c) into my module/class. The import does not appear to be working and provides undefined at runtime. Weirdly the debugger tooltip of the iziToast variable in the chrome debugger tools suggest that the type has loaded correctly.

There is an iziToast_1 variable available that does provide the correct instance but I have to get to it via hacky and non-CSP compliant eval call.

import Failure from "./failure";
import iziToast from "iziToast";

export class Notify {
    private notifier: any;
    
    public constructor() {
        this.notifier = iziToast;

        if (!this.notifier) {
            // tslint:disable-next-line:no-eval
            this.notifier = eval("iziToast_1");
        }
    }
}

The only other thing I've been able to find is that iziToast_1 gets registered in the map file but does not exist anywhere else in compiled source (via Webpack) or anywhere in the node_modules directory.

I don't think this is to do with minification however because I find the same results on code that isn't minified. I also doubt that this is an issue with webpack as all other modules load fine.

Any idea what is going wrong here?

been trying to implement your library with my React project that uses Material UI template library

it appears I cant get popups to appear visually, and no errors are thrown :(

text-align still is left on message

i fix it with this change :
.iziToast-rtl .iziToast-body p, .iziToast-rtl .iziToast-body strong : { text-align: right; }
and result:

but still i think would be nice if we have an option for font-size

thanks for your great work

As per question.

When trying to do, for examle:
iziToast.info({ title: 'Hello', message: 'Welcome!', });
The message is not displayed:

We use the latest Version of iziToast which is 1.1.4.
(This is happening to all toasts)
Even here: http://izitoast.marcelodolce.com/, the Example Info Toast does not display the message.

I get error : Uncaught ReferenceError: isClosed is not defined(…) on

line 403 : settings.onClose.apply(null, [settings, $toast, isClosed]);

On the minified version this error does not show.

Testes on a clean page, no other JS loaded.

Hello,
The notification is always hidden behind the elements.

I wish she was always ahead. Is it possible ?

Thank you!

How can I change final opacity? I mean at the end of the show animation.

Hi, i sow you have supported IE 10, but in my organization the client require at least IE 9, Do not iziToast support IE 9 ??.

Thanks in advance.