CODEWITHSUNDEEP
css
pkr
pkr

Reputation: 1771

Automatically resize textbox to fit available space

Can I have a fixed size row div where the input resizes automatically to take the available space, but everything in the row div is in the same line? (The first row below would have the same width as the second row, because the input in the second row would shrink automatically).

<div class="row">
    <input type="text" />
</div>

<div class="row">
    <span class="leftText">Text</span>
    <input type="text" />
</div>

http://jsfiddle.net/CqCax/

Upvotes: 1

Views: 2552

Answers (2)

ffrappo
ffrappo

Reputation: 5415

Of course you can.

display: -webkit-flex;

Full code: http://jsfiddle.net/frapporti/gXLeK/

Upvotes: 2

Prashank
Prashank

Reputation: 796

Try this

-- HTML

<div class="row">
    <input type="text" />
</div>

<div class="row">
    <span class="leftText">Text</span>
    <input type="text" />
</div>

-- CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.row {
    display:table;
    width: 200px; 
}
span {
    width: 1%;
    padding-right: 10px;
}
input, span {
    display:table-cell;
} 
input {
    width: 100%;
}

http://jsfiddle.net/9aAse/4/

Its a little hacky way tho.

Upvotes: 2

Related Questions