1

Tengo un campo llamado descripcion, que coge la descripción de la base de datos, y el tamaño de la caja del input text es igual al valor de la longitud de la cadena de texto del valor obtenido en descripción.

Explico: si la cadena que recojo de descripción, tiene un longitud de 29 caracteres, entonces el input text tiene un size de 29 caracteres.

El problema viene cuando quiero mostrarlo en un div, entonces el valor del input text, si es excesivamente largo, sobresale del div.

¿Cómo le puedo dar el input el valor máximo del div? Hasta la raya roja.

Código:

<!DOCTYPE html>
<html lang="es">    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Modificar cabaña</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="css/estilos_modificar.css">
    </head>

    <body>
        <!-- Obtengo todos los datos. -->
        <?php $objeto_cabana = BD::datosCabana($_REQUEST["idcabana"]); ?>

        <div id="mostrar_datos">
            <form action="modificar.php" name="modificar" id="modificar" method="POST">
                <label for="nombre">Nombre: </label>
                    <?php $longitud_nombre = strlen($objeto_cabana->getNombre()); ?>
                    <input type="text" size="<?php echo $longitud_nombre; ?>" id="nombre" name="nombre" value="<?php echo $objeto_cabana->getNombre(); ?> "/>

                <label for="descripcion">Descripción: </label>
                    <?php $longitud_descripcion = strlen($objeto_cabana->getDescripcion()); ?>
                    <input type="text" size="<?php echo $longitud_descripcion; ?>" id="descripcion" name="descripcion" value="<?php echo $objeto_cabana->getDescripcion(); ?> "/>
            </form>
        </div>
    </body>
</html>

CSS:

#mostrar_datos{
    margin: auto;
    width: 60%;
    max-width: 800px;
    max-height: 700px;
    background: #F3F3F3;
    padding: 20px;
    border: 2px solid rgba(0,0,0,0.2);
}

Mirar imagen:

introducir la descripción de la imagen aquí

1
  • 2
    Lee ejemplo mínimo verificable. Siempre que pones el código en tus preguntas sobre HTML y CSS, dejas el PHP que es innecesario y solo crea ruido. Comparte el HTML generado y no el PHP que lo genera para que podamos ver el problema. Además, lo pones como bloques separados de código, cuando podrías usar el botón de snippet que permitiría verlo todo de golpe.
    – Alvaro Montoro
    el 9 ene. 2018 a las 10:29

1 respuesta 1

2

Se desborda por el uso del size en las etiquetas input[text] ya que le estas asignando el tamaño del elemento según el texto y no el tamaño del campo. Para ello te recomiendo cambiar el atributo size por maxlength.

En el siguiente ejemplo te muestro como usarlo en tu ejemplo y se ha añadido al estilo el width:100% para que se adapte al tamaño del padre.

#mostrar_datos{
    margin: auto;
    width: 60%;
    max-width: 800px;
    max-height: 700px;
    background: #F3F3F3;
    padding: 20px;
    border: 2px solid rgba(0,0,0,0.2);
}

#nombre,  #descripcion {
 width:100%;
}
<!DOCTYPE html>
<html lang="es">    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Modificar cabaña</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="css/estilos_modificar.css">
    </head>

    <body>

        <div id="mostrar_datos">
            <form action="modificar.php" name="modificar" id="modificar" method="POST">
                <label for="nombre">Nombre: </label>
                    
                    <input type="text" maxlength="999" id="nombre" name="nombre" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>

                <label for="descripcion">Descripción: </label>
                    <input type="text" maxlength="999" id="descripcion" name="descripcion" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
            </form>
        </div>
    </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.