Sibay Sibay - 6 months ago 10
CSS Question

Internet explorer 9 wrapped in div table, which consist of inputs, select/deselect bug

I have a table which consist of inputs in cells

There is strange bug (in IE9, I didn't test it in another IE versions) after moving between inputs (or after select/deselect) table - table's parent div begins to expand if the overflow: auto; property setted and if there is horizontal scroll

How it looks like:

enter image description here

Link to sample try to select some rows in table

HTML:

<div class="maindiv">
<div class="gridwrapper">
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
</tr>
<tr>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
<td><input type='text' value='Cell'/></td>
</tr>
</tbody>
</table>
</div>
<div class="bottomdiv">
<label>AddRow</label>
</div>
</div>


CSS:

.gridwrapper {
max-height: 150px;
overflow: auto;
border: 1px solid black;
}
.maindiv {
width: 400px;
border: 1px solid gray;
}
table {
width: 100%;
}


Someone knows how to solve this problem?

Answer

min-height: 0%; to fix this bug in ie9

.gridwrapper {
    min-height: 0%;
    max-height: 150px;
    overflow: auto;
    border: 1px solid black;
}