Bootstrap 3.1.1 Navbar Form Feedback Misaligned

Question

On screens >=768px, everything works great. When a user inputs an incorrect username or password, the form fields glow red/yellow/green and get a little glyphicon toward the right side. If you resize smaller than 768px, it switches to the mobile view including a collapsible navbar (where my login form is). On the collapsed navbar, the feedback glyphicons are below the form fields rather than inside of them.

The PHP controls what state to make the fields after doing the login check against mysql. Lines like this <?php echo $form_error['user']; ?> simply place the text 'has-success', 'has-warning', or 'has-error' in the class assignment. Similarly, the <?php echo $form_error['user_glyph']; ?> lines will replace with <span> tags for the glyphicon itself. (See the rendered source at the bottom if this is hard to follow)

Here is the source code I have for the nav:

    <body>
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BrandLogo</a>
          </div>
          <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" action="login.php" method="post">
              <div class="form-group has-feedback <?php echo $form_error['user']; ?>">
                <label class="sr-only" for="ip-username">Username</label>
                <input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="<?php echo $submitted_username; ?>" required/>
                <?php echo $form_error['user_glyph']; ?>
              </div>
              <div class="form-group has-feedback <?php echo $form_error['password']; ?>">
                <label class="sr-only" for="ip-password">Password</label>
                <input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
                <?php echo $form_error['password_glyph']; ?>
              </div>
              <button type="submit" value="Login" class="btn btn-success">Log in</button>
            </form>
          </div><!--/.navbar-collapse -->
        </div>
      </div>

And just to clarify any confusion, here is a rendered source after submitting an invalid password (showing only the <form> block since nothing else is dynamic):

    <form class="navbar-form navbar-right" action="login.php" method="post">
      <div class="form-group has-feedback has-success">
        <label class="sr-only" for="ip-username">Username</label>
        <input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="some-username" required/>
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback has-error">
        <label class="sr-only" for="ip-password">Password</label>
        <input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      <button type="submit" value="Login" class="btn btn-success">Log in</button>
    </form>

The CSS is unaltered bootstrap 3.1.1. How can I get the small view to work correctly like the other views?

Thanks in advance!

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Don't know why it is doing it but if you add:

.navbar-form .has-feedback .form-control-feedback {
    top:0;
}

to your css it should fix it.

Also see: Bootstrap 3 has-feedback icon alignment with field sizing doesn't seem to work

I think it is probably a bug in Bootstrap.

edited May 23 '17 at 12:06

Community

1
1

answered Apr 02 '14 at 00:49

joshhunt

5,197
4
37
60

Thanks joshhunt, That is more or less the issue. I did some digging and it is clear that the navbar class doesn't get applied to the glyphicons when on viewports <768px. I posted another answer (same with a few more details) to hopefully help anyone else who stumbles on this. I had to style it inline to get it to apply. It works since this element should be top:0px on every view. – helo Apr 02 '14 at 12:12

score 0 · Accepted Answer · answered Apr 02 '14 at 12:14

I found that the solution was to style the <span> tags inline using style='top:0px;'

I still don't follow exactly why I needed to do this though. It seems on the collapsed view that the navbar class no longer applies (which gives the 0px top value instead of 25px from .has-feedback .form-control-feedback)

This is the css block that does it:

    @media (min-width: 768px)
    .navbar-form .has-feedback .form-control-feedback

The @media line appears to stop it from effecting the small view. I will use the inline css to work around this since I have no idea what other aspects the reactive code affects.

score 0 · Answer 3 · answered Apr 11 '14 at 00:57

0

This CSS should fix it for most cases.

.has-feedback label.sr-only ~ .form-control-feedback {
    top: 0;
}

Added bonus, it allows you to use both sr-only labels and non-sr-only labels in your forms on the same site.

answered Apr 11 '14 at 00:57

Sean

4,365
1
27
31

Bootstrap 3.1.1 Navbar Form Feedback Misaligned

3 Answers3