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

How to add multiple text rows? #740

Closed
voviks21 opened this issue Oct 8, 2017 · 9 comments · Fixed by #772
Closed

How to add multiple text rows? #740

voviks21 opened this issue Oct 8, 2017 · 9 comments · Fixed by #772

Comments

@voviks21
Copy link

voviks21 commented Oct 8, 2017

Hello
How can i make multiple rows or use html
?

@simon1tan
Copy link

simon1tan commented Oct 9, 2017

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.

@t4t5
Copy link
Owner

t4t5 commented Oct 9, 2017

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!

@hectorx2x
Copy link

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

@rkmax
Copy link

rkmax commented Nov 19, 2017

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

@t4t5 t4t5 closed this as completed in #772 Dec 14, 2017
@juanjoseortizalbornoz
Copy link

juanjoseortizalbornoz commented Feb 24, 2019

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

@mathurvishal
Copy link

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!

@mathurvishal
Copy link

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');

@yerskatmw
Copy link

yerskatmw commented Jun 19, 2020

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>',
 });

@CaptRango
Copy link

CaptRango commented Nov 17, 2020

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

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

Successfully merging a pull request may close this issue.

9 participants