Menu
I have the following little sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
table.Sample { width: 600px; table-layout: fixed; }
table.Sample col { width: 60px; }
table.Sample td { height: 20px; line-height: 20px; padding: 0px; }
table.Sample input { width: 55px; height: 17px; padding: 0px; margin: 0px; border-width: 1px; }
</style>
</head>
<body>
<div id="scrollDiv" style="width: 400px; overflow: auto; background-color: #CCCCCC;">
<table class="Sample">
<colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /></colgroup>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td><input type="text" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
</body>
</HTML>
This works ok on IE8, IE10, Chrome, FireFox, Safari, ... but it bugs on IE9.
When I start typing into the text box, the div grows in height. The scrollbar does not move, but the div grows below the scrollbar.
I can't define the height of the div in css as the number of lines is variable and I'm not sure the scrollbar will be present (as the number of columns is variable in the real example).
I can solve the problem with the following javascript code, but I was wondering I was doing something wrong to provoke the error.
var div = document.getElementById('scrollDiv');
div.style.height = div.offsetHeight + "px";
Thanks
238
This appears to be a bug in IE9 with how it handles overflow-x:auto. Adding display:inline-block to the css for the div worked great for me. Source:
Internet Explorer 9's magically expanding div
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
