CODEWITHSUNDEEP
htmlcssbuttoninput
monty
monty

Reputation: 1590

input/button display:table-cell/width:100% do not fill remaining space in table

I'm styling an input group <div> wrapper as display:table; with all contents display:table-cell; When I want to have a fixed width on the table, if the cell I want to widen/shorten to take up the remainder width is a <span> element or a <ul> element, for example, then setting width:100%; works. However, if the element is an <input> or <button> then this does not work in firefox or chrome (but does in IE) and the result is the element takes up the entire space of the input group, pushing the next element down to a new row. I can get around this by putting the <input> or <button> inside a <span> element and setting width:100%; on both, but I'd rather have a css solution.

<div class="input-group wide">
    <input  type="text" style="width:100%;"></input>
    <button>S</button>
</div>

css:

.input-group {
    display:inline-table;
    padding:0px;
    background-color: grey;
}
.input-group > input, .input-group > button, .input-group > span, .input-group > ul {
    display: table-cell;
    margin:0px;
}
.wide {
    width: 260px;
}

http://jsfiddle.net/5v3Lg50d/3/

Upvotes: 1

Views: 1983

Answers (2)

DeDee
DeDee

Reputation: 1992

Floats are good idea, you can follow Epik's solution. I checked one thing with Firebug for Firefox and I learned that <button> works fine with its parent div having style="display: inline-flex". You might want to check this against other browsers and use it conditionally, or go with floats instead.

Upvotes: 1

Epik
Epik

Reputation: 3357

I have a JS fiddle here with the changes made. http://jsfiddle.net/5v3Lg50d/4/

Basically i changed a few small things and tidied up your fiddle. The elements you wanted full width i added in a class and floated left;

.fullWidth {
    width:100%;
    display:inline-block;
    float:left;
}

The following is the code i amended:

<div class="input-group wide" style="">
    <span class="fullWidth">space</span>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
    <ul class="fullWidth"><li>o1</li><li>o2</li></ul>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
    <input  type="text" class="fullWidth"></input>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide">
    <span><input class="fullWidth"></input></span>
    <button class="fullWidth">S</button>
</div>
<br />
<br />
<div class="input-group wide">
    <button class="fullWidth">A button</button>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
    <span><button  class="fullWidth">A button</button></span>
    <button>S</button>
</div>

Hope this helps. -Epik

Upvotes: 1

Related Questions