3

I have a navbar using Twitter bootstrap. I want the search terminal to take up 100% of the unused width. I can figure this out using javascript, but is there a way to set this in css or some more elegant way?

Here is my navbar code:

<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
    <div class="container">
        <ul class="nav">
            <li class="active">
                <a class="brand" href="#">term:</a>
            </li>
            <!-- <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li> -->
        </ul>
        <form class="navbar-search">
          <input type="text" class="search-query" placeholder="Search">
        </form>
        <ul class="nav">
            <li><a href="#">Help</a></li>
        </ul>
    </div>
</div>

Here is the relevant CSS:

.navbar-search {
  position: relative;
  float: left;
  margin-top: 6px;
  margin-bottom: 100px;
}
.navbar-search .search-query {
  height: 30px;
  width: 100%;
  padding: 4px 9px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 1;
  color: #ffffff;
  background-color: #626262;
  border: 1px solid #151515;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
user1167650
  • 3,177
  • 11
  • 34
  • 46
  • 1
    I think you're looking for flexbox. Unfortunately, browser support for flexbox is still sketchy. A work around you can do is to give all menu elements a fixed width, defined in percentage, and subtract the remainder for the search box. – Lie Ryan Aug 07 '12 at 14:58
  • You may find interesting information in [this question](http://stackoverflow.com/q/1030793/1478467) or [this one](http://stackoverflow.com/q/628500/1478467) – Sherbrow Aug 07 '12 at 15:06
  • Oh nice. Those get me close, but adding display: block; width:100% causes pushes my "help" to the next line. – user1167650 Aug 07 '12 at 15:25

1 Answers1

3

Were you the one who marked this up?

You positioned the navbar to the bottom by using navbar-fixed-bottom, and then, you insert a 100px bottom margin? what's the point?

If you only want to achieve this one, this one. Then you only need to apply the html code you've posted and remove the css.

Just add a class of span10 to your input field, so it'll be like this

<input type="text" class="search-query span10" placeholder="Search">
GaryP
  • 2,173
  • 1
  • 21
  • 28
  • I made it 100px so it wasn't right up against the bottom of the page. I'll probably change it later. span10 just looks like a width hardcode that get's updated. Anyways to just do this in CSS? – user1167650 Aug 07 '12 at 15:25
  • Im not so sure if I got you right... But anyways, if you want to immitate the one in the image. You don't have to put css codes. Just the html markup. And if you want to clear up the navbar 100px away from the bottom, you control the enclosing div. In this case, its the
    . You may apply 100px bottom margin, by using embedded style, to override bootstrap.css
     – GaryP Aug 07 '12 at 16:00
  • sorry -- your image seems to be broken – user1167650 Aug 07 '12 at 16:32