CODEWITHSUNDEEP
javascriptjqueryjquery-animatepositioning
Ashley Strout
Ashley Strout

Reputation: 6268

"convert" text box to text area with sliding animation

I'm trying to make a textbox with an expand arrow that, when clicked, removes the text box and replaces it with a larger textarea with a nice sliding animation using jQuery. The problem is, the relatively positioned arrow on the right and the label on the left slide down with the textbox as it expands. I've been trying various combinations of vertical-align, display, padding and other CSS properties to try to keep them at the top all without avail. Interestingly, the design works in Firefox, the label and arrow staying where I want them, but not in Chrome or IE. You can see the work here.

Upvotes: 1

Views: 634

Answers (1)

Dmitry Pashkevich
Dmitry Pashkevich

Reputation: 13536

You need to set vertical-align: top; to your textarea and don't change it when you do your animation. I tried it in Chrome debugger and it works fine.

Also, why are you swapping an <input type="text" /> with a <textarea>? Why not just have <textarea> from the beginning, just give it a small height?

UPD. Assign vertical-align: top; to your <input> element as well so the label and the arrow stay at the same place when you swap it to textarea. Use top or margin-top to nudge them down a little bit if you need to.

//I don't have IE at hand so currently can't help you with that... What's happening in IE after suggested changes?

Upvotes: 1

Related Questions