web-dev-qa-db-fra.com

SweetAlert - Changer la largeur modale?

J'aime cette bibliothèque. J'aimerais l'utiliser pour afficher une table de réponses modérées sur l'une de mes pages Web, mais le texte devient un peu large. J'espérais qu'il était possible de modifier la largeur de l'alerte générale pour la page d'affichage de la table dans SweetAlert, mais je n'ai aucune chance. Table & HTML a fière allure, mais trop d’informations pour le modal. 

Je ne peux même pas trouver où la largeur est définie dans le fichier global sweetalert.css.

J'ai pensé que la clé de configuration customClass pourrait peut-être 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;
}

Cela n'a rien fait. Quelqu'un a une idée de comment faire cela ou peut-être a-t-il joué avec l'élément width?

Je vous remercie!

javascripthtmlcsssweetalert
13
Watercayman

essayez de mettre !important comme ceci dans le css:

.swal-wide{
    width:850px !important;
}

Voyez-le travailler dans l'extrait de code .

function TestSweetAlert(){
    swal({
       title: 1 +' Issues for test',
       text: "A custom <span style='color:red;'>html</span> message.",
       html: true,
       type: "info",
       customClass: 'swal-wide',
       showCancelButton: true,
       showConfirmButton:false
   });
};

$('#testeSWAL').on("click",TestSweetAlert);
.swal-wide{
    width:850px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>


<button id="testeSWAL"> Test SWAL </button>

Note : Peut-être que vous aurez des problèmes avec la position. 

19
Joel Ramos Michaliszen

Utilisez width, c'est-à-dire:

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

Sweet Alert2 Docs

5
Pedro Lobito

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

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

Utilisez simplement les options sweetalert pour définir votre classe uniquement sur les alertes que vous souhaitez élargir:

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

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

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

Voici jsbin pour l'essayer

4
Buksy

Mieux vaut utiliser SweetAlert2 qui succède à SweetAlert. Ajoutez simplement la propriété "width", comme ceci:

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

Le nom de classe pour SweetAlert modal est sweet-alert. Donc, si vous voulez changer sa largeur, le code CSS correct est:

.sweet-alert { 
       width:  850px;   
}

Ceci fonctionne avec SweetAlert 1.1.3

0
Lurai

Aucune des réponses ici n'a fonctionné pour moi. Tout ce que j'avais à faire était d'ajouter la valeur width sous forme d'entier (sans chaînes) et de supprimer le suffixe «px».

swal({
       width: 400,
       html: data,
       showCancelButton: true,
       showConfirmButton:false,
       cancelButtonText: "Close",
});
0
Jnr