CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Shepard
John Shepard

Reputation: 947

How to stop input resize on font-size change

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!

Upvotes: 2

Views: 3134

Answers (3)

code-red
code-red

Reputation: 306

Try to put width style on the text input.

Upvotes: 1

user1432124
user1432124

Reputation:

Change your #test css to

#test 
{ font-size:14px;height:20px;width:200px; }

Upvotes: 1

CKKiller
CKKiller

Reputation: 1422

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

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

Upvotes: 1

Related Questions