CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Uffo
Uffo

Reputation: 10046

Twitter bootstrap not displaying right

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:

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

Upvotes: 1

Views: 443

Answers (3)

davidkonrad
davidkonrad

Reputation: 85538

"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

Upvotes: 1

Joshua
Joshua

Reputation: 3603

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.

Upvotes: 4

Shail
Shail

Reputation: 3649

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>

Upvotes: 0

Related Questions