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.

Evite que input-group-append empuje el input-group vecino a la derecha.

29 May, 2023 Programación

Así que tengo este grupo de entrada input-group con un botón input-group-append que se renderiza en ciertas condiciones. Sin embargo, cuando tengo dos campos input uno al lado del otro y renderizo input-group-append para el primero, este botón empuja el campo de entrada derecho vecino en la derecha, disminuyendo su ancho. Este es el sandbox que uso para este ejemplo: muestra de código. Como puede ver, cuando escribo algo en Nombre de usuario del destinatario se renderiza el botón y empuja a Contraseña del destinatario a la derecha. Me gustaría evitar esto y renderizar el botón sin modificar los campos input en sí mismos. Ejemplo sin el código.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el botón adyacente de la entrada de grupo

    Cuando se renderiza un botón input-group-append, puede empujar el campo de entrada input adyacente a la derecha, disminuyendo su ancho. Para evitar esto, podemos usar la clase flex-grow-0 en el botón input-group-append.

    En el ejemplo de muestra de código proporcionado, se puede hacer el siguiente cambio en el botón input-group-append:

    <inputgroup.append>
  <button variant="outline-secondary" classname="flex-grow-0">
    Botón
  </button>
</inputgroup.append>

    Al agregar la clase flex-grow-0, el botón no ocupará espacio adicional y no empujará el campo de entrada adyacente a la derecha.

    Aquí está el ejemplo de muestra actualizado con la solución: código de ejemplo actualizado.

Comments are closed.