0
298
Vistasconfigurar el ancho de sweetalert2 automáticamente según el mensaje de texto
Estoy usando la biblioteca sweetalert2 para mostrar mensajes de alerta básicos, pero hay algunos mensajes más extensos que otros.
Es posible configurar el ancho del contenedor de alerta en automático, ¿entonces el mensaje se corrige en una línea?
Como comportamiento predeterminado, creo que el ancho está establecido en 360px, pero necesito una solución para que sea automático... espero que alguien pueda ayudarme... gracias
PD: Si importa, estoy usando Symfony 4.4. La configuración predeterminada es:
const Toast = Swal.mixin({ toast: true, position: 'top', showConfirmButton: false, timer: 3000, timerProgressBar: true, });y el evento de fuego en la plantilla:
<script> {% for type, msgs in app.session.flashBag.all() %} {% for msg in msgs %} Toast.fire({ icon: '{{ type }}', title: '{{ msg }}' }); {% endfor %} {% endfor %} </script>1 Respuestas
Responde la pregunta0
Después de algunas investigaciones y sin suerte, la prueba y el error fueron la mejor manera de obtener una solución adecuada.
Primero, sobrescriba algunos estilos css de la biblioteca sweetalert2:
.swal2-container { padding: 0.4em; } .swal2-toast { max-width: inherit; } body.swal2-toast-shown .swal2-container { width: unset; } .swal2-popup.swal2-toast .swal2-title { margin: 9px 5px auto; }Luego, en la etiqueta del script, cree un elemento de lienzo y, utilizando el estilo de fuente, calcule el ancho del lienzo...
<script> {% for type, msgs in app.session.flashBag.all() %} {% for msg in msgs %} inputText = '{{ msg }}'; font = "0.875rem Nimrod MT"; canvas = document.createElement("canvas"); context = canvas.getContext("2d"); context.font = font; width = context.measureText(inputText).width; formattedWidth = Math.ceil(width) + 100; Toast.fire({ icon: '{{ type }}', title: '{{ msg }}', width: formattedWidth, }); {% endfor %} {% endfor %} </script>El resultado final:
Espero que esta solución ayude a otros...