Question

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.

Answer 1

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 characters and add class