How to Make an Input Element Occupy All Remaining Horizontal Space

How do I make an input element occupy all remaining horizontal space?

See: http://jsfiddle.net/thirtydot/rQ3xG/466/

This works in IE7+ and all modern browsers.

.formLine {

overflow: hidden;

background: #ccc;

}

.formLine input {

width: 100%;

}

.formLine label {

float: left;

}

.formLine span {

display: block;

overflow: hidden;

padding: 0 5px;

}

.formLine button {

float: right;

}

.formLine input, .formLine button {

box-sizing: border-box;

}
<div class="formLine">

<button>click me</button>

<label>some text.. </label>

<span><input type="text" /></span>

</div>

Make an input take up all the remaining space

Try splitting the yellow <td> into its own table (or other elements using display: table-cell, etc).

Set the width of the cell containing the input to 100%, and set the max-width of the table to 100%.

That will cause the table inside the cell to re-flow when the text changes.

Basic demo:
http://plnkr.co/edit/ao4at9RHg8VgRrgtmTqu?p=preview

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>

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {

float:left;

width:180px;

background-color:#ff0000;

}

#right {

width: 100%;

background-color:#00FF00;

}
<div>

<div id="left">

left

</div>

<div id="right">

right

</div>

</div>

Have an element fill remaining horizontal space

One approach is to use flexbox:

div {

display: flex;

}

div input {

flex: 1;

}
<div class="name-field">

<label for="name">Name:</label>

<input type="text" id="name" />

</div>

<div class="email-field">

<label for="email">Email address:</label>

<input type="email" id="email" />

</div>

Make input to fill the remaining width of label

Try Flexbox

label {

display: flex;

}

input {

flex: 1;

}
<label>name:

<input type="text" />

</label>

Make div occupy remaining width of parent

First of all, try avoiding float, it's quite messy.
In order to achieve the 'two items on one line' trick, you need to know to set the width of your button, and tell the input to take the remaining space with the calc() CSS attribute.

input {
display: inline-block;
width: calc(100% - 100px);
}

button {
width: 100px;
margin: 0;
display: inline-block
}

div {
width: 100%;
}

Check out this flexbox guide as well, it's very informative on how to place objects!

Good luck!

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/

Make a div fill up the remaining width

Try out something like this:

<style>
#divMain { width: 500px; }
#left-div { width: 100px; float: left; background-color: #fcc; }
#middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
<div id="left-div">
left div
</div>
<div id="right-div">
right div
</div>
<div id="middle-div">
middle div<br />bit taller
</div>
</div>

divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

Note that the "middle div" goes after the "right div" in the HTML



Related Topics



Leave a reply



Submit