CODEWITHSUNDEEP
javascripthtmlcssinput
halliewuud
halliewuud

Reputation: 2785

input field width set to content

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.

Upvotes: 1

Views: 1260

Answers (2)

ajax333221
ajax333221

Reputation: 11774

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

Upvotes: 2

silviot
silviot

Reputation: 4768

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) {
    element.size=element.value.length;
}
adjust_width($('#date')[0]);
adjust_width($('#time')[0]);

should do the trick with your example.

Upvotes: 0

Related Questions