Dynamic HTML inside SweetAlert

[Andrei Culda]

When adding dynamic HTML like a bootstrap tablist with tables and other html components inside, the Sweet alert is not centered on the screen.

i declared html content as:

var htmlcontent = '<ul class="nav nav-pills" role="tablist">' +
                             '<li role="presentation" class="active"><a href="#POCInfo" data-toggle="tab">Details</a></li>' +
                            '<li role="presentation" >' +
                                   '<a href="#Questionnaires" data-toggle="tab">' +
                                    '<span class="label label-success"> ' + markers[z].QuestionnairesCount + '</span>' +
                                         ' Questionnaires' +
                                   '</a>' +
                              '</li>' +
                               '<li role="presentation" class="disabled"><a href="#" >Orders</a></li>' +
                            '</ul>' + .......

and I called SweetAlert like this:

swal({
     title: markers[z].Name + ' visit on ' + markers[z].VisitDate,
     text: htmlcontent,
     html: true
});

Do you have a solution for this or is there something i'm doing wrong?

[Andrei Culda]

I forgot to mention that I modified the CSS also. I put width to auto, as the AweetAlert default width was not working with what I wanted:

[Codrut TG]

Andrei, you have to dynamically update the margins of the alert also when you use dynamic width content inside the alert container.
After you generate the dynamic content, just calculate the width and set margin-left: -(newWidth)/2