Sweetalert: How to add multiple text rows?

Created on 8 Oct 2017  ·  9Comments  ·  Source: t4t5/sweetalert

Hello
How can i make multiple rows or use html
?

Most helpful comment

Here's my hack based off https://sweetalert.js.org/docs/#content.

var span = document.createElement("span");
span.innerHTML='abc<br>efg'
swal({
  content: span,
});

I'm sure there is a better way.

All 9 comments

Here's my hack based off https://sweetalert.js.org/docs/#content.

var span = document.createElement("span");
span.innerHTML='abc<br>efg'
swal({
  content: span,
});

I'm sure there is a better way.

For now, @simon1tan's way of doing it is the way to go, but I agree that it's a bit tedious for something as simple as adding a line break. I think the best way would be if SweetAlert automatically replaced \n characters with <br> tags in the text option, so that people can write:

swal("Hello\nthere!")

If anyone wants to tackle this (should be very simple), feel free to send a pull request!

It has been hard to find a way to use the HTML elements, your hack has helped me, thank you very much friend!

PD: the "\n" it's not working for me, it's not doing a line break

I think automatically things are not sood good, I think is better different options, example

  • content: current object
  • text: plain text (if you wat can add line break parsing here)
  • html: receive html string

u can use html to use "
"
swal({
title: 'Error',
html: 'Verifique por favor e intente
asdasdasas' ,
showConfirmButton: true,
showCloseButton: true,
})
Bye

const lines = ['You are very important to us, all information received will always remain confidential.', 'We will contact you as soon as we review your message.', 'We have sent an email to you at '+contact_email+' , Please check it for quick response.'];

swal('Thank you for contacting us!',lines.join('\n\n'),'success');

//worked for me!

const lines = ['You are very important to us, all information received will always remain confidential.', 'We will contact you as soon as we review your message.', 'We have sent an email to you at '+contact_email+' , Please check it for quick response.']; swal('Thank you for contacting us!',lines.join('\n\n'),'success');

for my case added div tag to cover the text will work

origina: Line0<br />Line1<br /> [not working]
after: <div>Line0<br />Line1<br /></div> [working fine]
swal({
    title: 'Mt Title',
    html: '<div>Line0<br />Line1<br /></div>',
 });

swal({ buttons: ["Wait ", "Add Details"], html: true, text: "Text one .\n Text 2.\n Text 3." })
Here is the solution. Works perfectly in react. Enjoy

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vmitchell85 picture vmitchell85  ·  6Comments

blackrosezy picture blackrosezy  ·  6Comments

mouro001 picture mouro001  ·  3Comments

sastrahost picture sastrahost  ·  5Comments

daftspunk picture daftspunk  ·  4Comments