0

There is a portion of a web app that I am writing that is being a particular pain to make look really nice and neat like I want it. I have a button with a fixed width next to a form that contains text, an input text box, and a submit button. I want the width of the input box to resize based on the width of the screen but I don't know how to do without making a piece fall onto the next line.

Here is a fiddle of the problem: http://jsfiddle.net/Yt3V2/

HTML:

<div class="wrapper">
  <button type="button" class="new_button">Create New</button>
  <form name="input" action="" method="post">
    Search: 
    <input type="text" class="search_input"></input>
    <input type="submit" value="Submit"></input>
  </form>
</div>

CSS:

.new_button
{
  float: left;
  min-width: 120px;
}

.search_input
{
  width: /* What could go here? */;
}

A lot of suggestions included making a table out of the CSS, which gets me pretty close but the text box will still get cut off: http://jsfiddle.net/G9pDw/

Is there any way to get the input text box to resize dynamically and still fit where I want it to?

Chase Sandmann
  • 4,795
  • 3
  • 30
  • 42

1 Answers1

2

According to this question : try changing :

 <input type="text" class="search_input"></input>

to

<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>

JSFiddle

**Updated*************************

New JSfiddle

Community
  • 1
  • 1
Ahmed Ali
  • 977
  • 1
  • 12
  • 25
  • While that's a really cool effect (I'll have to remember that for future reference), it's not really what I'm looking for. That resizes based on the current input in the field, but I'm looking for the field to always take up the maximum space available to it. – Chase Sandmann Jul 10 '13 at 23:45