CODEWITHSUNDEEP
javascripthtmlcssinputfield
stillan00b
stillan00b

Reputation: 41

Input field resize

I'm having trouble with re-sizing my search input bar. I've managed to make it re-size when the browser window gets smaller using width:100%;. But I can't get the starting width to be 300px without making it always 300px and then it's goes out of the parent div on resize. For some reason it's 185px;

Here's the jsfiddle of my set-up.

Upvotes: 1

Views: 129

Answers (2)

lex82
lex82

Reputation: 11317

Just remove all the float: left; and it works. It seems they are not required anyway. At least you don't state it anywhere and floating for 100% width elements makes no sense from my point of view.

Upvotes: 0

CoderPi
CoderPi

Reputation: 13221

You are embeding your input into a span by calling $('.search2').typeahead. This span has the css-class twitter-typeahead wich is not set to width: 100%;

Add this to your CSS:

.twitter-typeahead {width: 100%;}

Then you need to change your div container css to this (width: 100%; max-width: 300px;):

.div2 {
  float: left;
  width: 100%;
  max-width: 300px;
  padding-left: 20px;
}

Leaving width: 100%; on your input is fine!

See the working code: http://jsfiddle.net/utg4mh6z/1/

Upvotes: 1

Related Questions