Solved

How can I make a horizontal form 100% width when including a button?

Posted on 2014-01-08
5
711 Views
Last Modified: 2014-01-08
I'd like this inline form to be width:100%.  The search button should be a constant width, but the search box should be dynamic.  Any ideas how to do this?
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only">Search</label>
    <input type="search" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Open in new window

0
Comment
Question by:TrevorTomato
  • 2
  • 2
5 Comments
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 39766944
The easiest way is to use a table element.  Still haven't seen anything to beat this approach to fixed width elements

http://jsbin.com/uHodibO/1/edit?html,css,output

    <table class="form-table">
      <tr>
        <td class="row1"><label class="sr-only">Search</label></td>
        <td class="row2"><input type="search" class="form-control" placeholder="Search"></td>
      </tr>
    </table>

Open in new window


css:
.form-table {
  width: 100%;
}
.form-control {
  width: 100%;
}
.row1 {
  width: 5%;
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39766945
You mean you want the input box to be 100% width?

Just add

.form-inline input {
    width:100%
}

http://jsfiddle.net/DUE5R/1/
0
 
LVL 43

Expert Comment

by:Rob
ID: 39766949
You can emulate a table using css only.  Taking your markup:  http://jsbin.com/icEjeKOY/1/edit?html,css,output

.form-inline {
  width: 100%;  
  display: table;
}
.form-group {
  display: table-row;
}
.cell {
  display: table-cell;
}
.form-control {
  width: 100%;
}
.sr-only {
  width: 15%;
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39766977
I'm guessing here that you are probably using Bootstrap which has a class for 100% widths - just add a class of .form-control to the input (if it is the input you want to be 100%) else Rob's solution maybe the way to go.
0
 

Author Closing Comment

by:TrevorTomato
ID: 39767041
Worked great!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question