es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

cómo cambiar la posición de una casilla de verificación en SweetAlert 2

25 Jul, 2023 Programación

Estoy buscando una manera de descubrir si es posible cambiar la posición de la casilla de verificación en sweetalert 2 desde el centro hasta la posición superior. Usé este código:

(async () => {

      const { value: accept } = await Swal.fire({
        title: 'Términos y condiciones',
        input: 'checkbox',
        inputValue: 1,
        inputPlaceholder:
          'Sí, acepto recibir un correo electrónico con materiales educativos, anuncios de productos y empresas, e información sobre eventos de la comunidad de T&C. Puedo darme de baja en cualquier momento. Me gustaría recibir comunicaciones de marketing según se menciona anteriormente.',
        confirmButtonText:
          'Continuar <i class="fa fa-arrow-right"></i>',
        inputValidator: (result) => {
          return !result && 'Debes estar de acuerdo con T&C';
        }
      });

      if (accept) {
        Swal.fire('Aceptaste los T&C :)');
      }

      })()

El resultado de este código es este:

enter image description here

Me gustaría cambiar la casilla de verificación desde el centro a la posición de la palabra “Sí”.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Desafortunadamente, no es posible cambiar la posición de la casilla de verificación en SweetAlert2 desde el centro a cualquier otra posición utilizando las opciones proporcionadas en el código que has publicado. La posición de la casilla de verificación está controlada por los estilos predeterminados de la biblioteca SweetAlert2 y no se puede modificar fácilmente sin modificar el código fuente de la biblioteca en sí.

    Sin embargo, puedes intentar lograr el resultado deseado utilizando estilos CSS personalizados. Una opción es agregar una clase personalizada al elemento de entrada y luego estilizarlo utilizando CSS para mover la casilla de verificación a la posición deseada. Aquí tienes un ejemplo:

    1. Agrega una clase personalizada al elemento de entrada:
    inputClass: 'custom-checkbox'
    1. Agrega CSS personalizado para mover la casilla de verificación a la posición deseada:
    .custom-checkbox .swal2-checkbox {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
}

.custom-checkbox .swal2-input {
  margin-top: 25px;
}

    Nota: Es posible que sea necesario ajustar este CSS dependiendo del diseño y la estructura específica de tu página.

    Ten en cuenta que modificar el comportamiento y los estilos predeterminados de bibliotecas de terceros puede generar un comportamiento inesperado y problemas de mantenimiento potenciales en el futuro. Es importante probar exhaustivamente cualquier modificación personalizada y considerar si vale la pena asumir los riesgos potenciales.

Comments are closed.