0

I have a responsive layout. One block has a form input and button. How can I make the elements have a combined width of 100%?

Im using Twitter Bootstrap 3 but I cant see any classes they provide for this.

Ive tried using display table on the the container and display table-cell on the the children but it doenst work, im assuming text input doenst render the styles in the same way a div would.

I could use absolute positioning but then the CSS would break if the button's text was lengthened. So I would rather stay clear of this method.

I dont want to set a fixed % width eg 80% for the input and 20% for the button. I want the button to take up the space it requires, and for the input to take whatever is left.

enter image description here

http://codepen.io/anon/pen/jEPoRG

<div class="form-group">
   <input type="text" placeholder="Search">
   <button type="submit" class="btn btn-default">Submit</button>
</div>

.form-group {
  background: grey;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
Evanss
  • 23,390
  • 94
  • 282
  • 505

1 Answers1

2

If you put a div around the search bar, then you can use display: table/table-cell on .form-submit and its children. I assumed that .search_bar_div's width would have been auto, but that didn't quite stretch all the way. But then I tried 100% and this seems to be working as you want.

I tested Mozilla and Chrome only.

<style type="text/css">
 .form-group {
    background: grey;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    display: table;
  }

  .search_bar_div {
    width: 100%;
    display: table-cell;
  }

  .form-group .search_bar_div #search_bar {
    width: 100%;
  }

  .form-group .btn {
    display: table-cell;
  }
</style>

<div class="form-group">
  <div class="search_bar_div">
    <input id="search_bar" type="text" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</div>
Isaac
  • 2,246
  • 5
  • 21
  • 34