La guía paso a paso o código que hallarás en este post es la solución más eficiente y efectiva que hallamos a esta inquietud o dilema.
Solución:
tratar de poner !important así en el css:
.swal-wide
width:850px !important;
Véalo funcionando en el fragmento.
function TestSweetAlert()
swal(
title: 1 +' Issues for test',
text: "A custom html message.",
html: true,
type: "info",
customClass: 'swal-wide',
showCancelButton: true,
showConfirmButton:false
);
;
$('#testeSWAL').on("click",TestSweetAlert);.swal-wide
width:850px !important;
Nota: quizás tengas problemas con el puesto.
En las versiones más recientes puedes usar:
width: '800px'
es decir:
swal(
title: "Some Title",
html: "Your HTML",
width: '800px'
)
Sweet Alert2 Documentos
En lugar de sobrescribir el valor predeterminado .sweet-alert clase css puedes definir la tuya propia
.sweet-alert.sweetalert-lg width: 600px;
En lugar de simplemente usar las opciones de alerta dulce para configurar su clase solo para aquellas alertas que desea que sean amplias:
swal(
title: "test",
text: "Am I wide?",
customClass: 'sweetalert-lg'
);
PD (actualización): es posible que deba cambiar un poco la clase de alerta dulce para centrarla correctamente:
.sweet-alert margin: auto; transform: translateX(-50%);
Aquí está jsbin para probarlo
Nos puedes apoyar nuestro ensayo poniendo un comentario y dejando una puntuación te damos la bienvenida.