Auto extend width to text field

Question

How to get the text field with auto extend based on the browser width (with pure css). For example if I scale the browser to minimum width also the text field should not jump to the second line.

I need exactly like how it is shown in this image

Answer 1

there are more than one ways you can achieve this position
http://jsfiddle.net/rHqE7/4/

<div id="wrap">
<div id="name">Name</div>
<input type="text" name="fname" id="text" />
</div>​

#wrap{width:500px;overflow:auto;}​
#name{float:left;width:100px;font-size:16pt;padding:10px 5px;}
#text{float:left;min-width:300px;max-height:20px;border:1px solid black;padding:3px;}

Answer 2

You can't do it alone with CSS. Use jQuery AutoResize Plugin

 $('#myTextBox').autoResize({
        onResize : function() {
           //Do something on resize
        },
        animateCallback : function() {
           //Do something after resize
        },
        animateDuration : 300,//Duration
        extraSpace : 40//Extra Space
    });

Answer 3

As far as I can know, you cannot do it with only CSS for inputs, but you can emulate this behaviour using a div with contenteditable attribute - demo http://dabblet.com/gist/3150040

HTML

<div contenteditable></div>

CSS

div {
    min-width: 150px;
    width: auto;
    border: solid 1px #ccc;
    display: inline-block;
}

Answer 4

Not 100% sure it's the desired effect but for some browsers this might be what you're looking for:

html:

<p>
<label>Test</label>
<span><input></span>
</p>​

And css:

label{width:200px;float:left;}
span{display:block;width:100%;box-sizing:border-box;padding-left:200px;}
input{width:100%;box-sizing:border-box;}​

Example: http://jsfiddle.net/48fNt/ (works in at least chrome)

Maybe you also still need to play around with white-space:nowrap and a min-width.