problema con paddingTop en animate input text

[oms02]

Hola a todos.

Estoy con un problemilla bastante simple de solucionar a priori, pero que no hay forma de dar con la manera.

Se trata de un input text en el que al coger el foco, éste se haga más grande (tanto en alto como en ancho).

El problema viene en que toma por defecto un padding que parece ser la mitad del alto del input y necesito que el padding sea normal y corriente (unos pocos pixeles) y no tan exagerado.

Aquí el fiddle para que veais a que me refiero.

He probado introduciendo el padding en el ".animate", cambiando el método y poniendolo en ".css" y cambiando la etiqueta por un textarea pero no funciona ninguna de estas maneras.

Alguien sabe que me falta por favor??

Muchas gracias por vuestro tiempo. Saludos!

[Lobito14]

La verdad es que no entiendo cual es tu problema. Ese input no tiene padding en ningún momento.

Saludos.

[oms02]

El input tiene un padding(top) "elegante". No se si lo estas viendo con IE, porque en IE aparece sin padding (IE8). En Chrome y Firefox me sale con un padding que debe ser mas o menos la mitad del alto que alcanza al hacerse grande.

[Lobito14]

Lo estoy viendo desde Chrome 27.0.1453.116 m, y no tiene ningún tipo de padding!!!

Saludos.

[oms02]

Pues no lo entiendo.

Tengo exactamente la misma version de Chrome y yo si que observo el padding.

En FF tengo 21.0 y se ve el mismo padding.

[Lobito14]

Aquí tienes la prueba.

Antes:



Después:



Como ves, el padding no cambia en ningún momento, ni tiene si quiera, solo 1px por debajo, lo cual es imperceptible.

Saludos.

[oms02]

No te he dicho que necesite pruebas Lobito. Doy por hecho que lo que me estás diciendo es verdad. No se si con esto me estas diciendo que tú si que necesitas una prueba.




De todas formas, aunque veo que el padding esta a cero, si escribes en el input, comprobarás que no se corresponde con el supuesto padding. A eso me refiero. Necesito que, por mucho que el código css diga que tiene padding X, el padding que se vea en la página realmente se corresponda con eso.

Muchas gracias por el interés mostrado. En serio.

Saludos!

[Lobito14]

oms02, primeramente, creo que aquí lo que falla es el conocimiento sobre lo que es el padding.

El padding está a 0.

Si lo que le estás poniendo es mucho alto a ese input quizá, si es así modifica el valor del height. Si lo que quieres es que la letra llene mas, ponle un tamaño mas grande de letra con la propiedad font-size.

Me estás hablando de padding y ahí padding no hay en ningún momento, entonces de ahí viene la confusión de conceptos.

Un saludo.

[oms02]

No, lo que falla no es el conocimiento sobre lo que es el padding, pues tengo claro lo que es.

Tampoco le estoy poniendo mucho alto al input puesto que, si modifico éste, le ponga el alto que le ponga, la distancia vertical desde el borde superior del input al lugar donde la escritura se realiza siempre se ve modificada.

La letra tampoco quiero que ocupe más. La letra debe tener el tamaño normal que suele tener. De todas formas, modificando el tamaño de la letra tampoco se consigue que esa distancia se haga menor.

Más alla de una confusión o no de conceptos, lo único que busco es que al hacer una animación en un input text y modificar su tamaño vertical, en lugar de que la escritura comience así:



necesito que lo haga así:



Una vez más, aunque no estemos llegando a ningún acuerdo, te agradezco que te tomes interés en mi problema, de verdad.

[Lobito14]

Te decía que falla el conocimiento del padding, porque desde un primer momento me estabas diciendo que el problema era el padding, sin embargo el padding ahí no estaba entrando en juego en ningún momento, era solo la altura.

Historia a parte, ahora si, tocando el padding inferior, se puede llegar al comportamiento que muestras en esa imagen para aclarar, quedaría algo así:

http://jsfiddle.net/Tk6d9/4/

Espero que te sea de ayuda, si no, aquí seguimos intentando ayudar!!

Un saludo.