Link to home
Start Free TrialLog in
Avatar of Keith McElroy
Keith McElroy

asked on

Bootstrap, html5, jquery - widen input box to match data when focused, then return to original size when offfocus

How do I add code to javascript which will make every input box expand to a size so that the contents is readable and then contract
to the original bootstrap-driven size after leaving the input box.

10 second video:
http://www.screencast.com/t/yQnPFkA6vr
Avatar of Russ Suter
Russ Suter

You can actually do this without javascript. CSS alone can get the job done. Here's an example of CSS that would do it.
input
{
  width: 60px;
}

input:focus
{
  width: 120px;
}

Open in new window

and a working jsfiddle example: https://jsfiddle.net/3za2L9at/
If you wanna get fancy with animation: https://jsfiddle.net/3za2L9at/1/
Avatar of Keith McElroy

ASKER

input.comment
{
  width: 60px;
}

input:focus
{
  width: 100%;
}

I tried this, 100% only takes it out to the original width which seems to be based on the Heading.
It did not take it out to the width desired based on a variable length of text in the box.

Make sense, I hope?
input.proj
{
  width: 100%;
}

input.proj:focus
{
  width: 160px;
}

input.comment
{
  width: 100%;
}

input.comment:focus
{
  width: 260px;
}

This worked ok, I have to set the css by field;  it does
make the screen better.  Thanks for the solution, it helped a lot.
If there is a more dynamic way of handling that would
be very helpful also.
ASKER CERTIFIED SOLUTION
Avatar of Russ Suter
Russ Suter

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
fabulous!