SweetAlert - Changer la largeur modale?

J'adore cette bibliothèque. J'aimerais l'utiliser pour afficher une réponse modérée table sur une de mes pages web, mais le texte est un peu large. J'espérais qu'il y a une option pour changer la largeur de l'ensemble de l'alerte pour la page que je suis l'affichage de la table dans les SweetAlert, mais je ne suis pas du tout avoir de la chance. Table & HTML allure, tout simplement trop d'info pour le modal.

Je ne peux même pas trouver où la largeur est définie dans l'ensemble de la sweetalert.css.

J'ai pensé que peut-être la customClass configuration de la clé peut l'aider et j'ai essayé:

swal({
       title: priorityLevel +' Issues for '+appName,
       html: appHTML,
       type: "info",
       customClass: 'swal-wide',
       showCancelButton: true,
       showConfirmButton:false
   });

Le css était juste un simple:

.swal-wide{
    width:850px;
}

N'en est pas de faire quoi que ce soit. Quelqu'un a une idée de comment faire ceci ou peut-être avez joué avec la largeur de l'élément?

Merci!

source d'informationauteur Watercayman

  1. 3

    Plutôt que de les écraser par défaut .sweet-alert classe css, vous pouvez définir votre propre

    .sweet-alert.sweetalert-lg { width: 600px; }

    Que de simplement utiliser sweetalert options pour définir votre classe uniquement à ces alertes vous voulez être large:

    swal({
  title: "test",
  text: "Am I wide?",
  customClass: 'sweetalert-lg'
});

    PS (mise à jour): Vous devrez peut-être modifier sweetalert classe un peu pour le centrer correctement:

    .sweet-alert { margin: auto; transform: translateX(-50%); }

    Voici jsbin essayer

  2. 3

    Simplement utiliser widthc'est à dire:

    swal({
    title: "Some Title",
    html: "<b>Some Html</b>",
    width: '800px'
})

    Sweet Alert2 Docs

  3. 1

    Mieux utiliser SweetAlert2 qui est un successeur de SweetAlert. Ajoutez juste "largeur" de la propriété, comme:

    swal({
   title: priorityLevel +' Issues for '+appName,
   html: appHTML,
   type: "info",
   customClass: 'swal-wide',
   showCancelButton: true,
   showConfirmButton:false,
   width: '850px'
});
  4. 0

    Le nom de la classe pour SweetAlert modal est doux d'alerte. Donc, si vous souhaitez modifier la largeur, le bon code CSS est:

    .sweet-alert { 
       width:  850px;   
}

    C'est de travailler avec SweetAlert 1.1.3