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.

  • es.davy.ai/
  • Programación /
  • Los elementos de etiquetas de entrada dentro del contenedor de la cuadrícula CSS están desbordando.

Los elementos de etiquetas de entrada dentro del contenedor de la cuadrícula CSS están desbordando.

17 Jul, 2023 Programación

Los campos de entrada no parecen adaptar sus anchos al contenedor de rejilla. Aproximadamente a los 430 píxeles de ancho en el modo de respuesta del navegador, comienza a desbordar el contenedor de rejilla.

No quiero codificar el ancho.

¿Alguien podría ayudarme a solucionar y explicar este comportamiento?

<div class="form_container">
    <form class="register_1" action="">

        <div class="username">
            <label for="username">Nombre de usuario</label>
            <input type="text" name="username" placeholder="Nombre de usuario">
        </div>

        <div class="fname">
            <label for="fname">Nombre completo</label>
            <input type="text" name="fname">
        </div>
    </form>
</div>

.form_container {
  background-color: white;
  padding: 1rem;
}
.form_container .register_1 {
  display: grid;
  grid-template-columns: 5% 1fr 5%;
  grid-template-rows: repeat(5, 2rem);
  row-gap: 0.5rem;
  background-color: blue;
  border-radius: 1rem;
}
.form_container .register_1 div {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 1rem;
  place-items: center;
}
.form_container .register_1 div label {
  color: white;
  font-weight: 400;
  place-self: center end;
}
.form_container .register_1 div input {
  border-radius: 1rem;
  border: none;
  padding: 1em;
  font-family: "Poppins", sans-serif;
  height: calc(1.4 * 1rem);
}

No se muestra el código y la salida.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución podría ser establecer el ancho del campo de entrada al 100% y ajustar el relleno en consecuencia. De esta manera, el campo de entrada se adaptará automáticamente a la cuadrícula del contenedor sin necesidad de codificación rígida.

    Aquí tienes un ejemplo de cómo modificar el CSS para el selector .form_container .register_1 div input:

    .form_container .register_1 div input {
  border-radius: 1rem;
  border: none;
  padding: 0.5rem;
  font-family: "Poppins", sans-serif;
  height: calc(1.4 * 1rem);
  width: 100%; /* establece el ancho al 100% */
  box-sizing: border-box; /* incluye el relleno en el cálculo del ancho */
}

    Explicación:
    – Al establecer el width al 100%, el campo de entrada ocupará el espacio disponible en su elemento padre.
    – La propiedad box-sizing: border-box; incluye el relleno y el borde en los cálculos de ancho y alto, por lo que el campo de entrada no se desbordará del contenedor de la cuadrícula.
    – El valor del padding se reduce a 0.5rem para compensar el mayor ancho del campo de entrada.

    Además, es posible que desees ajustar la propiedad grid-template-columns del selector .form_container .register_1 div para proporcionar más espacio a los campos de entrada:

    .form_container .register_1 div {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 3fr; /* ajusta los anchos de las columnas según sea necesario */
  column-gap: 1rem;
  place-items: center;
}

    Explicación:
    – La propiedad grid-template-columns establece el ancho de las columnas en el contenedor de la cuadrícula. Al utilizar 1fr 3fr, la primera columna ocupará 1/4 del espacio disponible, mientras que la segunda columna ocupará 3/4. Puedes ajustar estos valores según sea necesario para proporcionar más o menos espacio a los campos de entrada.

Comments are closed.