SweetAlert text formatting

I am using sweetAlert to display a dialog. Inside my dialog box, I need to display a large line with line breaks in between. My example line looks like this:

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

      

etc. So, basically, I want each one to be on a new line and match up with spaces. When I use the slider dialog, the line breaks are displayed correctly, but the text is automatically centered and the spacing is truncated. Can anyone help me set the alignment and spacing manually?

+3


source to share


1 answer


Wrapping the string in a tag <pre>

might be the solution:

var str="Task1Name          :    Success  :   statusCode\n" +
        "Task2NameLonger    :    Failed   :   statusCode\n";
         
swal({
  html: '<pre>' + str + '</pre>'
});
      

.swal2-modal pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}
      

<script src="https://unpkg.com/sweetalert2@7.7.0/dist/sweetalert2.all.js"></script>
      

Run codeHide result





PS. The original warning alert plugin is not supported, I suggest you use the SweetAlert2 plugin.

Migration is easy, here's a migration guide: Migrating from SweetAlert to SweetAlert2

+3


source







All Articles