CSS make textbox fill all available width

Question

I have the following \"line\" in my web page

\"Some Text\"  \"Some more text\"   &l         


        
                      

              相关标签:
       
      

Answer 1

The only way I see it feasible is with Javascript, so you get the width of the div (in pixels), deduct the current size of the other controls and add the result as with of the input. That would require you to put the text inside a span control (so you can get its size).

Answer 2

Set the width of the textbox to 100% with the css property display: inline;?

Answer 3

This is not doable in CSS as far as Chrome is concerned. The feasible way is by manipulating the size attribute of the form control through JavaScript. If the length of the string is 25, add an extra of at least 10 for the clearance.

HTML

<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />

JavaScript / jQuery

<script>
    var value = jQuery('#textbox1').val();                  // 43
    jQuery('#textbox1').attr('size', value.length + 10 );   // resizes the textbox
</script>

Another option also is by pre-calculating the size from a back-end script.

PHP / HTML

<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />

Answer 4

Here is what worked for me. Note that in some cases I had to use   between items otherwise it fell to the next line.

.flexContainer {
    display: flex;
    width:100%;
}
input {
    width: 100%;
}

<div class="flexContainer">
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label>
</div>

Answer 5

I would suggest the following:

<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>

Answer 6

UPDATED ANSWER IN 2018

Just came across this old question and there is now a much simpler and cleaner way to achieve this by using the CSS Flexible Box Layout Model which is now supported by all major browsers.

.flex-container {
  display: flex;
}

.fill-width {
  flex: 1;
}

<div class="flex-container">
	<label>Name:</label><input class="fill-width" type="text" /><span>more text</span>
</div>

Hope this helps someone!

OLD ANSWER BELOW

I know this is an old question but the correct solution isn't here so just in case somebody else finds there way here:

The solution is to wrap the textbox in a span.

HTML:

<label>Input</label>
<span>
    <input/>
</span>

CSS:

label {
    float: left;
}

input {
    width: 100%;
    box-sizing:border-box;
}

span {
    display: block;
    overflow: hidden;
}

See this fiddle for an example (now slightly out of date as I removed padding in favor of using border-box on the input).