How do I prevent toast from taking away focus?

Form components
1

How do I prevent the toast message from taking focus away from the current input? I’m doing an auto-save onchange of an input and toasting a “Saved” message, but if the user clicks onto the next input (triggering the onchange) then that input they clicked on immediately loses focus because of the toast.

Is there a way to prevent this from happening?

Also, where is the documentation for toast? Cause I’d also like to change it to the top of the screen rather than the bottom.

2

Hello @Vincent_Wansink

Here you can find the documentation for toast: https://docs.mobiscroll.com/jquery/notifications (Notifications - Toast section)
Also with display: 'top' setting you can change the positioning of the dialog.

3

Thanks for that link. I actually prefer the look of the snackbar option but I notice it doesn’t go full screen on bigger screens, like tablets. Is there a way to make it full width?

4

You can make it full width with custom CSS, if you want to get it full screen on a bigger screen.
May I ask why would you like to display the snackbar in full screen?
I’m asking because, as we know the native snack bars doesn’t shown full screen in a bigger screens.

5

I think it would look better if it was full width. I don’t know why the native snack bars don’t do it. I think it looks incomplete and awkward.

6

Sure, I understand @Vincent_Wansink :grinning:
So as I mentioned before, you can achieve this with custom CSS.