Bootstrap navbar-form width issue on chrome

Question

I'm using bootstrap 3.0.0.

While using Default Navbar example, with some custom CSS, I found search form text box is taking full width on chrome, due to which my navbar is broken into three lines. It is running fine on Firefox and IE.

Issue is, calculated width in firefox is 236px but in chrome, it is 1110px. Both firefox & chrome screenshot are attached at the end. Code is given after screen shots as well as at JSFiddle but output cant be seen there. Its just for reference.

Is it a known bug in chrome or more probably am I doing some mistake. If yes, can someone please figure out what mistake I did?

Custom CSS

@import url(http://fonts.googleapis.com/css?family=Spirax|Oleo+Script+Swash+Caps&text=FlipKhan);
body{background: url("../images/bg.gif") scroll center top #C0C0C0;}
.navbar-top {margin-bottom: 0; min-height: 35px; height:50px;}
.navbar-top div.container{height:45px;}
.navbar-top div.container div.navbar-header{height:45px;}
.navbar-top a.navbar-brand {padding: 10px;}
.navbar-top div.container div.collapse{height:45px;}
.navbar-top .navbar-brand {font-family: 'Oleo Script Swash Caps', cursive; font-size: 35px; color: #FFF;}
.navbar-inverse {
  background: none !important; 
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.navbar-inverse .nav .active > a {
  background: 0 !important; 
  color: #333 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.navbar-inverse .nav > li > a {
  color: #333 !important;
  text-shadow: none !important;
}
.navbar-inverse .nav > li > a:hover {
  color: #333 !important;
}

HTML (Only for navbar)

<header>
  <nav class="navbar navbar-top navbar-default navbar-inverse" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.html">FlipKhan</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <form class="navbar-form navbar-left navbar-search" role="search">
          <div class="col-lg-12">
            <div class="input-group">
              <input type="text" class="form-control input-sm">
              <span class="input-group-btn">
                <button class="btn btn-info btn-sm" type="submit"><span class="glyphicon glyphicon-search"></button>
              </span>
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Login</a></li>
          <li><a href="#">Register</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </nav>
</header>

EDIT:

Adding following line in CSS fix issue in chrome

.navbar-search{max-width: 250px;}

However I see this as hack. Isn't there and better way to fix the issue?

Answer 1

Could you also test in other browsers? I think chrome renders right maybe. But you are right the input renders different in chrome and firefox.

You could reduce the problem to:

<div style="float:left;">
<div class="input-group">
              <input type="text" class="form-control input-sm">
              <span class="input-group-btn">
              <button class="btn btn-info btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
              </span>
</div>
</div>

Note the float left is needed to show the differences (your float left came from the navbar-left class).

The above can "translate" to:

<div style="float:left;">
<div style="height:10px;background-color:red;" style="width:100%;">
<span style="display:table-cell;position:relative;width:1%;">txt</span>
</div>
</div>

The above renders different in chrome and Firefox also without Boosstrap's CSS. I don't know the Bootstrap CSS is wrong or one of the browsers is wrong for now. See also: https://github.com/twbs/bootstrap/issues/10645