elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  como re-dimensionar un input		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: como re-dimensionar un input  (Leído 5,418 veces)
Drewermerc

Desconectado Desconectado

Mensajes: 259



Ver Perfil WWW
como re-dimensionar un input
« en: 26 Septiembre 2014, 04:51 am »
Hola a todos.
Bueno tengo un problema y es que cuando re-dimensiono mi pagina web el input tipo text y password no se re-dimensionan y se salen del div.
y quisiera saber si hay alguna forma de que se acoplen al div.

bueno espero me puedan ayudar.
Saludos.
Drewermerc.
En línea
Mi blog personal
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: como re-dimensionar un input
« Respuesta #1 en: 26 Septiembre 2014, 05:14 am »
puedes hacerlos en porcentaje en css o hacerlo por formula en jscript

si usas jquery con un
Código
  1. $( window ).resize(recalcularInput());
y el calculo debe bastar
si no usas jquery
le puedes colocar al div la propiedad "onresize" algo como
Código
  1. <div onresize="recalcularInput();">
En línea
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Drewermerc

Desconectado Desconectado

Mensajes: 259



Ver Perfil WWW
Re: como re-dimensionar un input
« Respuesta #2 en: 26 Septiembre 2014, 05:31 am »
Hola angel lex.
Gracias por responder.
Bueno intente los dos métodos y no me funcionaron aun siguen sin re-dimensionarse los input text.
aquí dejo e código que tengo.
Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang = "es">
  3. 	<head>
  4. 		<title>prueba</title>
  5. 		<meta name="description" content="prueba" />
  6. 		<meta name="keywords" content="prueba, uno" />
  7. 		<meta http-equiv="Content-type" content="text/html: charset=iso-8859-1" />
  8. 		<link rel="StyleSheet" type="text/css" href="css/style-main.css" media="screen" />
  9. 		<script src="js/jquery-2.1.1.js" language="javascript" type="text/javascript"></script>
  11. 			$( window ).resize(recalcularInput());	
  12. 		</script>
  13. 	</head>
  14. 	<body>
  15. 		<div id="wrapper-main">	
  16. 			<div id="wrapper">
  17. 				<div id="form-session">
  18. 					<form id="sistema-login" name="form-login" enctype="text/plain" method="post" action="alumnos/default.php">
  19. 						<br />
  20. 						<label name="message-form">Inicio de sesi&otilde;n</label>
  21. 						<br />
  22. 						<label name="nom-user">Usuario:</label>
  23. 						<br />
  24. 						<input id="login" type="text" enctype="text/plain" size="15"/>
  25. 						<br />
  26. 						<label name="password-user">Contrase&ntilde;a:</label>
  27. 						<br />
  28. 						<input id="password" type="password" enctype="text/plain" size="15" />
  29. 						<br />
  30. 						<input id="send" type="button" value="Entrar" />
  31. 					</form>	
  32. 				</div>
  33. 			</div>
  34. 		</div>
  35. 	</body>
  36. </html>
  37.  

Código
  1. body, html{
  2. 	height: 100%;
  3. 	width: 100%;
  4. 	margin: 0px;
  5. 	padding: 0px;
  6. 	background: #ccc;
  7. }
  8. #wrapped-main, #wrapped{
  9. 	width: 100%;
  10. 	height:100%;
  11. 	margin: 0px;
  12. 	padding: 0px;
  13. }
  14. #form-session{
  15. 	position: absolute;
  16. 	width: 20%;
  17. 	height: 30%:
  18. 	margin-left: 45%;
  19. 	margin-top: 5%;
  20. 	background-color: #c1c1c1;
  21. }
  22. #send{
  23. 	margin-left: 30%;
  24. }
  25.  

Saludos.
Drewermerc.
En línea
Mi blog personal
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: como re-dimensionar un input
« Respuesta #3 en: 26 Septiembre 2014, 05:50 am »
algún día verás esto y te reirás y preguntarás "que cara.. hice?"  :xD


Código:
recalcularInput()
no es una función predefinida del sistema, la tienes que hacer tu jejeje! :xD
con ".width()" puedes ver el ancho del div y con ".width(ancho)" puedes aplicarlo a los inputs

por cierto, en el css, el porcentaje era para los input directamente
En línea
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Drewermerc

Desconectado Desconectado

Mensajes: 259



Ver Perfil WWW
Re: como re-dimensionar un input
« Respuesta #4 en: 26 Septiembre 2014, 06:55 am »
Hola angel lex.
 :xD creo que si pero bueno aprenderé jquery y un poco mas de javascript.
y gracias por tu ayuda con el porcentaje en css me funciono bien.

Saludos.
Drewermerc.
En línea
Mi blog personal
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como unir dos input
Desarrollo Web 		Z ZERO 5 9,094 Último mensaje 25 Septiembre 2011, 19:24 pm
por Z ZERO
¿Cómo dimensionar un doble apuntador?
Programación C/C++ 		ERIK546 5 6,050 Último mensaje 2 Julio 2012, 08:02 am
por ERIK546
Dimensionar form sin bordes
Programación Visual Basic 		rapbyone 1 4,967 Último mensaje 26 Octubre 2014, 04:11 am
por daniel.r.23
Dimensionar un vector dentro de un struct « 1 2 »
Programación C/C++ 		ShadowA7X 10 8,539 Último mensaje 9 Noviembre 2014, 01:45 am
por ivancea96
Como poner un minimo de caracteres en un input
PHP 		noaptebuna 3 7,973 Último mensaje 24 Septiembre 2015, 15:31 pm
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines