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+