Reputation:

How to stretch input field to full width?

I have a simple HTML form. I'd like the right widgets in the second column (text field, combox, and so on) to stretch and fill the full column.

My HTML looks like this:

<table class="formTable">
  <tr>
    <td class="col1">Report Number</td>
    <td class="col2"><input type="text"/></td>
  </tr>
  <tr>
    <td class="col1">Report Type</td>
    <td class="col2"><select></select></td>
  </tr>
</table>

My CSS looks like this:

.formTable {
  border-color: black;
}

.formTable td {
  padding: 10px;
}

.formTable .col1 {
  text-align: right;
}

.formTable .col2 {
  width: 100%;
}

Any ideas?

Upvotes: 31

Answers (5)

yunzen

Reputation: 33449

Note

This is not an answer, but a comment, which includes too much code to go into the comment section. So please refrain from downvoting me, would you? :)

Other semantic markup additionaly to Matthew Darnells answer:

If you wrap the labels around the inputs and selects, you can avoid using the forand id attributes.

<ul class="formList">
    <li>
        <label>
            Report Number
        <input name="input_1" type="text" />
        </label>
    </li>
    <li>
        <label>
            Report Type
        <select name="input_2"></select>
        </label>
    </li>
</ul>

Or use a definition list which might give you additional control

<dl class="formList">
    <dt>
        <label for="input_1">
            Report Number
        </label>
    </dt>
    <dd>
        <input id="input_1" name="input_1" type="text" />
    </dd>
    <dt>
        <label for="input_2">
            Report Type
        </label>
    </dt>
    <dd>
        <select id="input_2" name="input_2"></select>
    </dt>
</dl>

Upvotes: 0

warkentien2

Reputation: 979

if using Twitter Bootstrap: and input is inside a column

just add to <input> the class="container-fluid"

Upvotes: 2

Matthew Darnell

Reputation: 4588

Start with semantic markup since this isn't tabular data. Also, with added labels, we don't need extra wrapper DIVs, which is cleaner.

<ul class="formList">
    <li>
        <label for="input_1">
            Report Number
        </label>
        <input id="input_1" name="input_1" type="text" />
    </li>
    <li>
        <label for="input_2">
            Report Type
        </label>
        <select id="input_2" name="input_2"></select>
    </li>
</ul>

Then add the CSS:

.formList {
    border:1px solid #000;
    padding:10px;
    margin:10px;
}
label {
    width:200px;
    margin-left:-200px;
    float:left;
}
input, select {
    width:100%;
}
li {
    padding-left:200px;
}

JS Fiddle Example: http://jsfiddle.net/6EyGK/

Upvotes: 8