CODEWITHSUNDEEP
twitter-bootstrap
K20GH
K20GH

Reputation: 6263

Bootstrap input box height has shrunk

On my site, I am using the bootstrap box, however the line height seems to have shrunk, and I cannot for the life of me figure out why.

I've not modified any bootstrap CSS, only my own but I don't believe this is interfering.

The code I am using is:

<div class="pull-left">
<h3>Search for devices</h3>
<p>Use the search form below to search for your device.</p>
<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Search</button>
</div>
</div>

Live example here: http://dev.romwars.com/#

Anyone have any suggestions?

Upvotes: 4

Views: 1073

Answers (2)

Daniel Wang
Daniel Wang

Reputation: 46

The browser is in quirks mode, because you didn't specify the doctype of the page.

Upvotes: 3

Pigueiras
Pigueiras

Reputation: 19356

My browser (Chrome) is applying a rule box-sizing: border-box in your input. To fix your problem you should put in your CSS this:

input[type="text"] {
  box-sizing: content-box;
}

Also it seems that your problem is what it's described in this question: What causes the “user agent stylesheet” to use “border-box” instead of “content-box” for box-sizing?. You can solve that putting <!DOCTYPE html> above your document.

Upvotes: 3

Related Questions