Question

I have been searching in stackoverflow for a question similar to mine because it is relatively simple, but I had no luck so far, so here it goes:

I have this input:

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

With this css rule:

#test { font-size:14px; }

But when I run this with jquery:

 $('#test').click(function () {
     $(this).css('font-size', '14px');
 });

The input box resizes to fit the new font-size. Is it possible to stop this?
Vertical resizing is ok with me, it is the horizontal resize that kills me 😉

Here is the fiddle.

Thanks in advance!

Answer 1

you need to set a max width property in your css
something like:

#test { 
  font-size:14px; 
  max-width: 150px;
}​