SweetAlert - Cambia larghezza modale?

Question

Amo questa libreria. Mi piacerebbe usarlo per visualizzare una tabella di risposta moderata su una delle mie pagine web, ma il testo diventa un po 'largo. Speravo ci fosse un'opzione per cambiare la larghezza dell'allarme generale per la pagina che sto visualizzando la tabella all'interno di SweetAlert, ma non sto avendo fortuna. Tabella & Il codice HTML sembra fantastico, troppe informazioni per il modal.

Non riesco nemmeno a trovare dove viene impostata la larghezza nel complesso sweetalert.css.

ho pensato che forse la chiave configuation CustomClass potrebbe aiutare e ho provato:

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

Il CSS è stato solo un semplice:

.swal-wide{ 
    width:850px; 
} 

Questo non ha fatto nulla. Qualcuno ha un'idea di come farlo o forse ha giocato con l'elemento larghezza?

Grazie!

Answer 1

cercare di mettere !important come questo nel css:

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

vederlo lavorare nel frammento.

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>

Nota: forse avrete problemi con la posizione.

Answer 2

Il nome classe per Modal SweetAlert è sweet-alert. Quindi, se si vuole cambiare la sua larghezza, il codice CSS corretta è:

.sweet-alert { 
     width: 850px; 
} 

Questo sta lavorando con SweetAlert 1.1.3

Answer 3

Invece di sovrascrivere di default .sweet-alert classe CSS è possibile definire il proprio

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

che semplicemente utilizzano opzioni sweetalert per impostare la classe solo a quegli allarmi che si desidera essere ampia:

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

PS (aggiornamento): Potrebbe essere necessario cambiare sweetalert classe un po 'per centrare in modo corretto:

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

Here is jsbin di provarlo

Answer 4

Migliore utilizzo SweetAlert2 che è un successore di SweetAlert. Basta aggiungere "larghezza" di proprietà, come:

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

Answer 5

Semplicemente usano width, vale a dire:

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

---

Sweet Alert2 Docs