Bootstrap 3 - How to maximize input width inside navbar - html

Question

Right now I have a navigation bar that looks like:
http://bootply.com/78239
I want to maximize the width of the "search" text-input, without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link).
I only have basic experience with css and web-design. I read something about "overflow: hidden" tricks, but I don't understand how to use it when there are more elements to the right of the targeted element.
Thanks
EDIT:
A partial solution can be to set the width "manually" for each case, like in http://bootply.com/78247 :
#media (max-width: 767px) {
#searchbar > .navbar-form {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
#searchbar > .navbar-form {
width: 205px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
#searchbar > .navbar-form {
width: 425px;
}
}
#media (min-width: 1200px) {
#searchbar > .navbar-form {
width: 625px;
}
}
but this solution will not work when the menu's texts are "dynamic" (for example, contain "Hello username").
I suppose it is not a big issue if you assume that there is a limit on the menu's texts' widths - it's just annoying to calculate/test those widths manually.
I'm just curious to know if there's a neat way to do it automatically.

Answer 1

For Bootstrap version 3.2 and up you should also set the display:table; for the input-group and set the width to 1% for the input-group-addon.
<div style="display:table;" class="input-group">
<span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control">
</div>
Demo Bootstrap version 3.2+: http://www.bootply.com/t7O3HSGlbc
--
If you allow changing the position of your navbar elements? I don't understand "without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link)." Try this: http://bootply.com/78374.
What i did:
Drop the float left of the form (by dropping the navbar-left class)
Give other navbar elements a right float (the navbar-right class)
Set display of the form-group to inline (style="display:inline")
Change the position of the elements (the right floated first)
Related question:
Expand div to max width when float:left is set
html:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Project</a>
</div>
<div class="navbar-collapse collapse" id="searchbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li id="userPage">
<i class="icon-user"></i> My Page
</li>
<li>Logout</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Clear</li>
</ul>
<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 class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</div>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>

Answer 2

Two things worked for me here. Adding Orens media queries, and also adding a display: inline to that searchbar form group:
<li id="searchbar">
<form id="search_form" class="navbar-form navbar-left navbar-input-group " role="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">All <span class="caret"></span>
</button>
</div>
<div class="form-group">
<input name="search_input" type="text" class="form-control typeahead" placeholder="Search for items or shops" autofocus="autofocus">
</div>
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
With the css:
#search_form > .input-group > .form-group {
display: inline;
}