CSS Make Textbox Fill All Available Width

CSS make textbox fill all available width

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>

Style input element to fill remaining width of its container

as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Get a textbox to fill 100% of the width of its container div

You can simply use flex like this :

form {  display: flex;}
input[type="text"] {  flex: 1}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div id="rowFormContainer">  <form id="frm">    <input type="text" id="txtUserURL" placeholder="Stack Overflow URL" />    <input type="submit" value="Get" class="btn btn-success" />  </form></div>

Make a textbox fill all the available space in container but there must be some place left for a fixed button

I didn't find something really elegant, but I got 3 options for you.

Set your textbox width with javascript.

textBox.width = textBox.Parent.width - button.width

use a 100% (or almost) width textbox in absolute and put the button over it

<div style="position:relative">
  <input type="button" style="float:right" value="search or what not" />
  <input type="text" style="width:100%; position:absolute; top:0px; z-index:-1 " />
  <br style="clear:both" />
</div>

use a table

<table width="100%">
    <tr><td>
        <input type="text" style="width:100%" />
    </td><td width="100">
        <input type="button" value="search or what not" />
    </td></tr>
</table>

Input text width to fill the remaining space

I have updated your fiddle here:

http://jsfiddle.net/m4MWD/3/

The Descrizione will not fill the parent, as you have a float on the parent. I have added a higher level wrap with the floats on.

#wrap1 {
float:left;
width:20%;
}
#wrap2 {
float:left;
width:78%;
margin-left:2%;
}

And then added this

div.label_e_campo input {
width:100%;
}

Does this work for you?

Getting an input to fill remaining width like a span element

This should do the trick for you:

css

.a {
    display:table-cell; background-color:red;
}
.b {
    display:table-cell; background-color:green; width:100%;
}
.c { width:100%; }
​

html

<div>
  <span class="a">something</span>
  <span class="b">fill the rest</span> 
</div>
<div>
  <span class="a">something</span>
  <span class="b"><input class="c" value="fill the rest" /></span>
</div>

jsfiddle : http://jsfiddle.net/FKZUA/55/

CSS fill remaining width

You can realize this layout using CSS table-cells.

Modify your HTML slightly as follows:

<div id="header">
    <div class="container">
        <div class="logoBar">
            <img src="http://placehold.it/50x40" />
        </div>
        <div id="searchBar">
            <input type="text" />
        </div>
        <div class="button orange" id="myAccount">My Account</div>
        <div class="button red" id="basket">Basket (2)</div>
    </div>
</div>

Just remove the wrapper element around the two .button elements.

Apply the following CSS:

#header {
    background-color: #323C3E;
    width:100%;
}
.container {
    display: table;
    width: 100%;
}
.logoBar, #searchBar, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.logoBar img {
    display: block;
}
#searchBar {
    background-color: #FFF2BC;
    width: 90%;
    padding: 0 50px 0 10px;
}

#searchBar input {
    width: 100%;
}

.button {
    white-space: nowrap;
    padding:22px;
}

Apply display: table to .container and give it 100% width.

For .logoBar, #searchBar, .button, apply display: table-cell.

For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.

Use text-align and vertical-align in the table cells as needed.

See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/

How to make input to take all remaining width in flex container?

You can try this:

body {  background: #f5f5f5;}
.outer-container {  width: 300px;  border: 1px solid gray;  padding: 10px;}
.container {  display: inline-flex;  align-items: center;}
.item {  height: 2rem;  width: 2rem;  font-size: 2rem;  line-height: 2rem;  border: 1px solid black;  border-radius: 50%;  text-align: center;}
input {  font-size: 2rem;  margin: 0 10px;  min-width:0; /* Remove the automatic minimum size set so the element can shrink*/  width: 87%; /* Set any value of width here as reference*/  flex: 1; /* make the item grow to fill the remaining space */}

<div class="outer-container">  <div class="container">    <span class="left item">-</span>    <input type="text" >    <span class="right item">+</span>  </div></div>

Expand input to take remaining width

The solution is already in your provided link:

.left {
    overflow: hidden;
}

JSFiddle

Another solution would be to add a margin:

.left {
    margin-right: 200px;
}

The first one is more flexible, though.

---

Related Topics