CODEWITHSUNDEEP
phpcsstwitter-bootstrap
Andrew
Andrew

Reputation: 4441

Twitter Bootstrap: Input-append Search Box

I am attempting to use Twitter Bootstrap input-append search and it's not lining up the text box and the search button. I've grabbed Twitters latest and greatest 2.1 bootstrap from August 20th (grabbed today). so things like "white-space: nowrap;" are already set.

Any ideas?

Code:

<li class="dropdown">
<a class="dropdown-toggle" id="Search" role="button" data-toggle="dropdown" href="#">Search<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ara-labelledby="Search">
 <form class="form-search">
  <div class="input-append">
   <input type="text" class="search-query">
   <button type="submit" class="btn"><i class="icon-search"></i></button>
  </div>
 </form>
</ul>
</li>

Sample Image:

Sample Image

Upvotes: 2

Views: 3262

Answers (2)

John Klakegg
John Klakegg

Reputation: 943

You are missing a proper doctype declaration. You need <!DOCTYPE html> over <html>, that's what causing the abnormality.

Tip

I also had a look at http://collecthw.com/ci, I would strongly suggest you use http://validator.w3.org/, there are a lot of errors in the markup. Cases of <div><form></div></form> which obviously ain't good. I could also spot multiple <body> tags along with multiple versions of jquery.

I also think the markup is totally different from what bootstrap offers. Modal markup in a dropdown don't seem to be a proper thing to do. If you follow the markup provided by bootstrap, and extend upon that if you wish, everything will be so much easier for you :)

Upvotes: 3

Kostia
Kostia

Reputation: 6304

Add this to the button css: margin-top: 0;

Upvotes: 1

Related Questions