18

I am using sweetAlert for dialog box display. Inside my dialog box, I have to display a large string with line breaks in between. My sample string is as follows:

var str="Task1Name          :    Success  :   statusCode\n 
         Task2NameLonger    :    Failed   :   statusCode\n"

and so on. So, basically, I want each of them in a new line and the spaces matched. When I use sweetalert dialog box line breaks are showing up properly but the text is aligned to the centre automatically and spacing is truncated. Can someone help me to manually set my alignment and spacing?

Limon Monte
  • 52,539
  • 45
  • 182
  • 213
Nagireddy Hanisha
  • 1,290
  • 4
  • 17
  • 39
  • You can set the text as html and use a borderless table – Alon Eitan Jun 06 '17 at 06:46
  • @AlonEitan The str is a variable which is filled dynamically depending on when a button is clicked. I am not sure if I can do it, Will try and update! I think it should be possible. Thanks! – Nagireddy Hanisha Jun 06 '17 at 06:50

4 Answers4

26

Wrapping a string into <pre> tag could be a solution:

var str="Task1Name          :    Success  :   statusCode\n" +
        "Task2NameLonger    :    Failed   :   statusCode\n";
         
Swal.fire({
  html: '<pre>' + str + '</pre>',
  customClass: {
    popup: 'format-pre'
  }
});
.format-pre pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

PS. The original sweet alert plugin is unsupported, I suggest you using SweetAlert2 plugin.

Migration is simple, here's the migration guide: Migration from SweetAlert to SweetAlert2

Limon Monte
  • 52,539
  • 45
  • 182
  • 213
20

If you switch to sweetalert2, you can use html instead of text:

swal({ title: 'hi', html: 'First line<br>Second line' });
dannybucks
  • 2,217
  • 2
  • 18
  • 24
2

I also have to show (a lot of) text with swal(2) and want to show the most of the text left aligned and the last line centered.
First, I have tried to apply css with customClass: 'swal-breit', and set the width and alignment in the css.
But this don't work for my case...

As css don't seems to work for my case, I have implemented it with HTML (paragraph and align). In my (juery) function (with the embedded swal), I first create a variable with the html code and then set the property html: to the variable.
Short description: First a lot of text is showed (left aligned), then a question is showed (centered).
If the user clicks 'Ja' (Yes), a specific page (view) is loaded, if he clicks 'Nein' (No), nothing happens (swal ist closed an the user remains on the page (view).

Code snipped(simplified to post here) (German):

function MySwalFunction() {
  var Meldungstext = "";
  Meldungstext = Meldungstext + '<p align="left"> text in paragraph here.. <strong>strong text kere...</strong> further normal text with line break. <br>'
  Meldungstext = Meldungstext + 'Second line of text </p>'
  Meldungstext = Meldungstext + '<p align="left"> second paragraph block.. with linebreak <br>'
  Meldungstext = Meldungstext + 'second line to second block </p>' 
  Meldungstext = Meldungstext + '<p align="left">tex ti third paragraph here </p>'
  Meldungstext = Meldungstext + '<strong>Last line WITHOUT paragraph = is showed centered (swal default) </strong>'

  swal.fire({
    title: '! Achtung !',
    html: Meldungstext,
    icon: 'question',
    showCancelButton: true,
    width: '90%',
    confirmButtonColor: 'blue',
    cancelButtonText: 'Nein',
    confirmButtonText: 'Ja',
  }).then(function (result) {
    if (result.value) {
      var hostname = window.location.origin;
      var xlink = hostname + "/main/sub/"
      location.href = xlink;
    }
    else {
    }
  })
}
FredyWenger
  • 2,236
  • 2
  • 32
  • 36
0

You can just use \n to break to new line

santosh devnath
  • 144
  • 6