Flexible width input field in Bootstrap 3 Navbar

Question

I'm trying to create a navigation bar which contains an input field. I would like the input field to occupy all available space in the navigation bar.

Following this answer, I successfully created a layout similar to what I want, which contains an "addon" icon to the left of the input field (see code here).

But: I don't want the icon near the input field.

The following code controls the input field:

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="input-group">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

The problem is that removing <span class="input-group-addon">...</span> to get rid of the icon, makes the input field contract to a smaller size and loose the rounded edges (which is less important. see code here).

Of course it doesn't make sense to wrap a single input field in an "input-group". But removing the "input-group" wrapper causes the input field to expand and break into a new line (see code here).

After looking at Bootstrap.css I tried to create a new css class which mimics the relevant code of the input-group class. This brings back the input field inline in the navbar, but still does not make it expand to occupy all available space (see code here).

My question is: How do I get the layout I want without the icon?
Bonus: Why are the "input-group" and the icon making the input field expand?

Required browser compatibility: Chrome, Firefox, IE8+

Answer 1

Well, most folks didn't used have to design with tables, but in 99 when I began, tables created the layouts and we used spacer .gifs and all kinds of crap to design with. When you have a display:table on the container and a display:table-cell on the contents inside it, since the .form-control is empty there has to be something else to force the width of the element to take up the space, or it's going to act like an empty cell. So you have to have an empty span with some padding on it to force it.

http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1

http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2

.test {
  display:table;
}

.test > .form-control {
  display: table-cell;
  margin-left:-3px;
}

.test > span {
  display: table-cell;
  width:1%;
  padding:0 3px;
}

HTML

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="test">
      <span><!--shim--></span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

Answer 2

Replace with this html: (made changes to glyphicon glyphicon-search and background-color, border of input-group-addon) Made the round edges too :)

<div class="container">

<nav class="navbar navbar-default" role="navigation">
    <div class="container">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
            <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="#">Some Brand</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar-collapsible">

        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>

        <div class="navbar-form navbar-right btn-group">
            <button type="button" class="btn btn-default">Button 1</button>
            <button type="button" class="btn btn-default">Button 2</button>
            <button type="button" class="btn btn-default">Button 3</button>
        </div>

        <form class="navbar-form">
            <div class="form-group" style="display:inline;">
                <div class="input-group">
                  <span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
                  <input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
                </div>
            </div>
        </form>

    </div>

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

Worked really hard to get to what you require. hope you appreciate :)

Answer 3

This will get you pretty much where you want to be

<div class="form-group" style="display:inline;">
    <div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
        <input class="form-control" type="text" placeholder="Search">
    </div>
</div>

It will not fill exactly all the space but it will fill most of it and will center the search box so it does not look out of place. Added more dynamic column sizing extra small screen uses a dropdown menu so I re-sized the box to fit the screen. to build a fully responsize page as you are describing you should probably nest everything inside a grid because col-?-? is not a fixed width it is a percentage width based on it's container.