Swal keeps appearing in the bottom of my webpage.

Hello! Great work with sweetalert2 and sorry if my question is not fitted to be here. However I wonder why my sweetalerts keep appearing at the bottom of my screen (see image: https://imgur.com/a/H8DlM).

I first thought this was some issue with my dependencies, but that was not the case because I created a codesandbox project to check that: https://codesandbox.io/s/k5117qon63

But it keeps appearing at the bottom!

I remeber having this issue with sweetalert-react and the fix for that was simply to import the ccs file, like this: import 'sweetalert-react/node_modules/sweetalert/dist/sweetalert.css' and I tried ti apply this to sweetalert 2 import 'sweetalert2/node_modules/sweetalert2/dist/sweetalert2.css', but it can’t find that file.

I have no idea how to fix this and all help is appreciated!

[Martinnord]

Oh THANK YOU! Been trying to fix this for hours and now it works! Maybe it would be worth mentioning this in the docs, like a little side note?

Anyways, thanks a lot @limonte. And great job with sweetalert2. I changed because of the inline-html and I’m exited you use it!

Cheers! 😃

[codemaker2015]

It’s due to missing of css file. Use the following code to import sweetalert in your application

import Swal from 'sweetalert2/dist/sweetalert2.js';
import 'sweetalert/dist/sweetalert.css';