CODEWITHSUNDEEP
htmltwitter-bootstrap
tvb
tvb

Reputation: 830

Bootstrap text input wrong height

I am having an issue with bootstrap input text height size. I am using the standard bootstrap.css stylesheet and the searchform resides inside a navbar:

<div class="navbar  navbar-fixed-top m-header">
    <div class="navbar-inner m-inner">
        <div class="container-fluid">
            <div class="row-fluid">
                ...

<!-- // START SEARCH BAR -->
<div class="span6 offset4">             
    <form>
      <div class="input-append" id="top-search">
        <input type="text" placeholder="Search...">
        <div class="btn-group">
            <button class="btn" tabindex="-1">Search</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
              <i class="icon-search"></i>aaa
            </label></li>
            <li class="divider"></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option2" checked>
              <i class="icon-th"></i>bbb
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option3" checked>
             <i class="icon-file"></i>ccc
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option4" checked>
              <i class="icon-inbox"></i>ddd
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option5" checked>
              <i class="icon-camera"></i>eee
            </label></li>
            </ul>
        </div>
      </div>
    </form>
</div>
<!-- // END SEARCH BAR -->
...

Firefox:

Firefox

Chrome:

Chrome

I did some research and it could be that I was using the wrong doctype but I followed the bootstrap guide and had already set the HTML5 doctype:

<!DOCTYPE HTML>
<html lang="en">
  <head>

I also checked if there was garbage characters inside my files by using linux 'file' and 'more' but this is not the case.

If I overwrite or turn off the height of the text input in inspect element tool the height is showing correct. As mention here: https://github.com/twitter/bootstrap/issues/246#issuecomment-7295682 Still the caret button size will show small..

However, I don't understand why the text input is showing correct on bootstraps own website: http://twitter.github.com/bootstrap/base-css.html#forms Why don't they have the same issue?

Upvotes: 3

Views: 3748

Answers (1)

tvb
tvb

Reputation: 830

Yes, I can confirm by viewing the actual source code there was code being outputted before the HTML and therefore the HTML doctype wasn't set. Moved it to the first line of the first file that is being called and it works now. Doh!

Upvotes: 2

Related Questions