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: