Field input text stands out from the div

Question

Field input text stands out from the div

Navigation

#1 by (2 votes)

1

I have a field called description , which takes the description of the database, and the size of the input text box is equal to the value of the length of the text string of the value obtained in description .

I explain: if the string I pick up from description , has a length of 29 characters, then the input text has a size of 29 characters.

The problem comes when I want to show it in a div , then the value of the input text , if it is excessively long, exceeds the div .

How can I give the input the maximum value of the div? To the red line.

Code:

<!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);
}

Look at image:

html css div

asked by omaza1990 09.01.2018 в 11:11

source

1 answer

Get JSON data Doubt with LOOP FOR (now in PIC C COMPILER)

score 2 · Accepted Answer

It overflows by the use of size in the input [text] tags since you are assigning the size of the element to it based on the text and not the size of the field. For this I recommend you change the attribute size by maxlength .

In the following example I show you how to use it in your example and the width:100% has been added to the style to adapt it to the size of the father.

#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>