CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
Richard Williams
Richard Williams

Reputation: 2242

Explanation for the behaviour of bootstrap input-group with hidden sub elements

If I have a button and an input field contained within a div with a bootstrap class of input-group, they fill the full width of the containing element. If I then hide the button, the input field now shrinks to some default length rather than taking up the full width. It looks a bit like this:

Top input full width, bottom input shorter

The code for this can be seen here http://jsfiddle.net/1gu6qnhk/1/.

Essentially this problem can be reduced to the following code:

<head>
<style>
.group {
    display: table;
}
.input {    
    width: 100%;
}
.item {    
    display: table-cell;
    width: 1%;
}
</style>
</head>
<body>
<div class="group">
    <input class="input" />
    <span class="item"></span>
</div>
<div class="group">
    <input class="input" />
    <span class="item">text</span>    
</div>
</body>

Why does the first div take up the full width available whilst the second only takes up a portion of the width, when the only difference is that the span in the second div contains text.

Fiddle here http://jsfiddle.net/Lbyjo79e/1/

Upvotes: 1

Views: 356

Answers (2)

Richard Williams
Richard Williams

Reputation: 2242

Setting the width of the parent element to 100% resolves this. (http://jsfiddle.net/Lbyjo79e/2/)

.group {
    display: table;
    width: 100%;
}
.input {
    width: 100%;
}
.item {
    display: table-cell;
    width: 1%;
}

The issue is in fact the same with just table elements. So if you have:

td {
    width:100%;
    border: 1px black solid;
}

<table>
    <td>two cells</td>
    <td></td>
</table>
<table>
    <td>one cell</td>
</table>

Then the first table takes up maximum width, but the second table only takes up a fraction. Setting the width of the table to 100% resolve this. Fiddle at http://jsfiddle.net/bkngop0f/.

Upvotes: 1

benny
benny

Reputation: 315

you can try this form: http://jsfiddle.net/07r866vp/

<div class="form-group">
    <input class="form-control" value="The span after this has text" />
<span class="item">
text
</span>

</div>
<div class="form-group">
    <input class="form-control" value="The span after this is empty" />
<span class="item">

</span>

</div>

Upvotes: 2

Related Questions