CSS make textbox fill all available width

Question

I have the following "line" in my web page

<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>

The DropDown control I don't really have control over the width, as it sizes to fit whatever the longest option value is. The Buttons are fixed width. How can I get the TextBox to fill all available remaining width?

I tried putting it in a table but run into the same problem, ie how do I make all other columns as small as possible to fit their content and then the TextBox column fill remaining width?

Hacky solutions are fine if necessary, I've long ago given up any pretence of even caring about CSS standards when it's so difficult to do the simplest thing.

Edit: to clarify, by TextBox I mean <input type="text"/>

You can control the width of the dropdown with a width style attribute. <select style="width:200px;">...</select> et al — Pradyumna
– Pradyumna, Commented Jul 7, 2010 at 10:32
@Pradyumma: I don't want to set the width of the dropdown. It should size to fit it's contents. — fearofawhackplanet
– fearofawhackplanet, Commented Jul 7, 2010 at 10:33
For the record, by TextBox you mean an <input type="text"/> not a <textarea></textarea> correct? — scunliffe
– scunliffe, Commented Jul 7, 2010 at 10:41

dekin88 · Accepted Answer · 2018-12-20 12:33:31Z

35

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).

edited Dec 20, 2018 at 12:33

answered Dec 19, 2012 at 20:33

dekin88

6238 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

josh-fuggle Over a year ago

I have created another version of this fiddle which clears out all of the superfluous code: jsfiddle.net/josh_fuggle/EjLfP/1

dekin88 Over a year ago

@josh-fuggle Thanks josh I have updated the answer to include your fiddle as it is indeed much clearer.

josh-fuggle Over a year ago

No problems, glad it helps :)

Sheridan Over a year ago

@dekin88, a good solution, but did you mean to use padding-left: 5px;? That would make more sense.

dekin88 Over a year ago

@Sheridan Actually the padding in Josh's fiddle is supposed to be on the right as the edge of the text input was being cut off if it is removed. I fixed by applying box-sizing: border-box; to the input element in the example and removing the padding completely as it is simply aesthetic, not functional.

|

bets · Accepted Answer · 2015-06-04 10:21:16Z

6

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>

answered Jun 4, 2015 at 10:21

bets

84010 silver badges13 bronze badges

3 Comments

dekin88 Over a year ago

This is not the correct way to use a flex box. You should never need to use non-breaking spaces to make your layout work. I've updated my answer with the correct use of a flex box.

bets Over a year ago

@dekin88 I see you updated your answer based on mine and improved it. OK.

dekin88 Over a year ago

No offence intended. I just wanted to note here for any people who may view this in the future that this isn't the way flex box is intended to be used.

JochenJung · Accepted Answer · 2010-07-07 10:35:26Z

3

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>

answered Jul 7, 2010 at 10:35

JochenJung

7,24312 gold badges67 silver badges114 bronze badges

1 Comment

fearofawhackplanet Over a year ago

That doesn't work either, still makes the textbox 100% of div width so now it just goes off the right of the screen.

xil3 · Accepted Answer · 2010-07-07 10:31:22Z

1

You can set the width of the textbox to 100% (with css as you did with the div), so it'll be spanned to the full extent of it's parent (assuming the parent tag extends the full screen).

answered Jul 7, 2010 at 10:31

xil3

16.5k8 gold badges68 silver badges103 bronze badges

1 Comment

fearofawhackplanet Over a year ago

This just puts the textbox on it's own line. I want all the content on a single line.

Pere Villega · Accepted Answer · 2010-07-07 11:08:22Z

0

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).

answered Jul 7, 2010 at 11:08

Pere Villega

16.4k5 gold badges66 silver badges100 bronze badges

Comments

Jonny Haynes · Accepted Answer · 2010-07-07 11:15:01Z

0

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

answered Jul 7, 2010 at 11:15

Jonny Haynes

3,2061 gold badge29 silver badges41 bronze badges

1 Comment

Frinavale Over a year ago

If you set the display:inline style, the width style will no longer work because the element is inline. To use the width style, you need to have the display as block or inline-block...or something that will let you set the width. If you do not want the width property to effect your style, display:inline works great because the width style no longer applies.

Abel Callejo · Accepted Answer · 2016-04-19 02:32:00Z

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 ); ?>" />

Collectives™ on Stack Overflow

CSS make textbox fill all available width

7 Answers 7

6 Comments

3 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

3 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Linked

Related