Twitter bootstrap not displaying right

Question

So I'm looking for this: http://twitter.github.com/bootstrap/base-css.html#forms the Inline form .form-inline

Now on my page the inputs look wired like they have no padding:

Live example: here: http://jsbin.com/ariret/1/edit

Here is my code:

      <div class="navbar">
        <div class="navbar-inner">
          <form class="form-inline" action="<?php echo $this->baseUrl('login'); ?>" id="form-login" method="post">
            <input type="text" class="input-small" id="email" name="email-login" placeholder="<?=$this->translate('Email');?>">
            <input type="password" class="input-small" id="password" name="password-login"  placeholder="<?=$this->translate('Password');?>">
            <label class="checkbox">
              <input type="checkbox" name="keep-logged" value="1" id="check-logged"> <?=$this->translate('Remember me'); ?>
            </label>
            <input type="hidden" name="login_type" value="normal" />
            <button type="submit" class="btn"><?=$this->translate('Login');?></button>
          </form>
        </div><!-- end navbar-iner -->
      </div><!-- end navbar -->

And here is, how it looks like:

It needs to have the same height as the login button. I have the css and js files included on my page!

Answer 1

This appears to be a JSbin bug with Bootstrap. Other test sites (and local host) show this to work as expected.

Bootstrap is setting the height of the input fields to 20px, yet it is not getting applied. The answer is not clear, but you can always head over to https://github.com/remy/jsbin/issues/new and file a new Issue.

Answer 2

" It needs to have the same height as the login button. I have the css and js files included on my page! "

<button type="submit" class="btn btn-primary btn-mini">login</button>

will reduce the height of the button to (almost) the height of the inputs

If you want to increase the height of the inputs to align the button, I suggest you locally override the css

<style type="text/css">
.form-inline .input-small {
  height: 30px;
  margin-top: 3px;
}
</style>

both "solutions" works in the jsbin example - http://jsbin.com/ariret/4/edit

Answer 3

You can create the following way :

Jsfiddle Working inline bootstrap form

Result in browser Jsfiddle in browser

<div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <div class="nav row-fluid">

                        <form class="form-inline pull-right">
                            <input type="text" placeholder="email or username" />
                            <input type="password" placeholder="password" />
                            <label class="checkbox">
          <input type="checkbox" name="keep-logged" value="1" id="check-logged"> <?=$this->translate('Remember me'); ?>
        </label>
        <input type="hidden" name="login_type" value="normal" />
                            <button type="submit" class="btn">login</button>
                        </form>

                </div>
            </div>
        </div>
    </div>