CODEWITHSUNDEEP
cssfill-parent
maaartinus
maaartinus

Reputation: 46422

Make an input take up all the remaining space

My problem is similar to this question, but different.

I have a table cell of an unknown width. This cell contains an input and a span. The span should be as wide as its contents needs and the input should take all the remaining space.

I've created a trivial plunk for this seemingly trivial question. The random text should be on the very right and the input should grow or shrink as needed to fill the yellow td.

Upvotes: 2

Views: 2159

Answers (2)

Šime Vidas
Šime Vidas

Reputation: 185933

This can be achieved with Flexbox.

HTML:

<td class="foo">
    <input class="foo__input">
    <span>dsflkwej</span>                
</td>

CSS:

.foo {
    display: flex
}
.foo__input {
    flex-grow: 1
}

Live demo: http://jsfiddle.net/simevidas/MhR77/

(Use Autoprefixer to add vendor prefixes for Flexbox properties.)

Upvotes: 2

willoller
willoller

Reputation: 7330

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

Upvotes: 1

Related Questions