Horizontally-expanding HTML input field

Question

I have an input field:

<input type="text" id="TextField" />

and set it to resize:

#TextField {
   resize: horizontal;
}

But it does not resize.

How can I have a text field resize horizontally (not vertically) when the text nears the end (right) of the text field? Or, are there any built-in ways for this to work (maybe using something in CSS)?

What browser are you using? No versions of IE support that property. — markle976, Feb 18 '13 at 02:07
I am using Internet Explorer 10. I know I can achieve this with JavaScript, @rudeovskizebear - but my question is, how? — Tommy, Feb 18 '13 at 02:09
Chrome, Version 24.0.1312.57 m does not support resize: horizontal either. — Tommy, Feb 18 '13 at 03:39

score 3 · Accepted Answer · edited May 23 '17 at 12:00

3

You will need to calculate the width of the box based on the width of the text. Here is a simalar question that might help. Calculate text width with JavaScript

edited May 23 '17 at 12:00

Community

1
1

answered Feb 18 '13 at 02:18

markle976

957
1
6
10

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

BTW there's a plugin which can help you achieve what you are looking for Resize INput box

edited May 23 '17 at 12:34

Community

1
1

answered Feb 18 '13 at 02:22

Shail

3,639
1
18
29

Horizontally-expanding HTML input field

2 Answers2