Take the 2-minute tour ×

So I have this jsfiddle. I have two jquery ui plugins witch gives these two input fields values. So the user is not ment to edit the fields manually therefore they are set to readonly.

Now to the problem, is there a way for me to change the width of the input fields dependent of the content size? Setting just the width in css to say 300px or so will maybe work for Septemember, but if the user choses some other month like May then it needs to be alot less then 300px.

share|improve this question

2 Answers 2

up vote 2 down vote accepted

Check this out: http://jsfiddle.net/SSBYG/30/

What I did is to count all the characters and then set the width based on the results

date.style.width = (date.value.length * 7) + "px";
time.style.width = (time.value.length * 7) + "px";

Note: if you are going to use that a lot and not just 2 times, it will be good idea to make a function

This is also useful: jQuery count charecters and add class

share|improve this answer

The size attribute of the input html tag of type text is meant to specify the visible width in characters. Thus

function adjust_width(element) {

should do the trick with your example.

share|improve this answer
adding this to the jsfiddle did not do anything –  halliewuud Sep 5 '11 at 19:04
@halliewuud I guess because that jsfiddle included mootools but not jQuery. I wrote my example for jQuery since you mention you use it on your page. Try this one: jsfiddle.net/SSBYG/29 –  silviot Sep 5 '11 at 19:19
Unfortunately, this will only size the input to approximate width of that many characters in the given font. Try strings with exceptionally wide or thin characters: value="WWWWWW" or value="llllll". –  Trevor Burnham Jun 15 '12 at 22:36

Your Answer


