Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2014-01-08
5
690 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

809 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