On my page I have a form with 3 elements; a label, an input (type text) and a submit button. I want the textfield to take up any remaining width of the container. That is, if the container is 900px wide, and the text forces the label to be 150px wide, and the submit button is 50px wide, then (without margin, border and padding) the textfield should render with a width of 700px.

Is there any way to do that?

  • Do you have a test site up we can see ? Joseph Workman about 7 years ago

3 answers

justin 13
2
points

If you're willing to use a table...

<table width="100%">
   <col width="0" />
   <col width="*" />
   <col width="0" />
   <tr>
      <th><label style="white-space: nowrap">hello my name is Simon and i like to do drawrings</label></th>
      <td><input type="text" style="width: 100%" /></td>
      <td><input type="submit" /></td>
   </tr>
</table>
Answered about 7 years ago by justin
  • To make it widest for sure, you might want to add to your style element "margin: 0;" in case it was css-ed elsewhere. o.k.w about 7 years ago
1
point

Use css to style your "textarea" and set the width to 100%.

Answered about 7 years ago by Joseph Workman
0
points

In general note that when using "width: 100%" a parent of the element MUST have it's width set.

Example - wrong:


<body>
   <div>
      <input type="text" style="width: 100%" />
   </div>
</body>

Example - also wrong:


<body>
   <div style="width: 100%">
      <input type="text" style="width: 100%" />
   </div>
</body>

Example - right:


<body>
   <div style="width: 250px">
      <input type="text" style="width: 100%" />
   </div>
</body>

Example - also right:


<body>
   <div style="width: 300px">
      <div style="width: 100%">
         <input type="text" style="width: 100%" />
      </div>
   </div>
</body>

Answered about 7 years ago by Petr Peller
  • Sorry, I give up. This editor is totally stupid. Someone please edit my answer. Thanks Petr Peller about 7 years ago
  • OK should be fine now, but the editor really needs update. Petr Peller about 7 years ago