I am trying to create a webpage with a dynamic number of forms (to represent a list of items a user can describe.
I have most of my functionality working, but I would like the dymicly added forms to show up in a row (with a scroll bar if needed) I have this mostly working. in Firefox it works as expected, but in IE9 (in standards mode) once the the content forces a scroll bar to be show the below the dymanic forms gets pushed down more for each new item added (If I set overflow-x: scroll rather than "auto" I do not get this) I am OK with the visual shift when the scrollbar initally apears, but after that I would not expect further shifts.
stripped down example:
<!DOCTYPE html>
<html>
<head>
<script>
var next_id = 1;
function maximize_width(element) {
var w = 0;
var c = element.firstChild;
while (c) {
if (!isNaN(c.offsetWidth)) {
w += c.offsetWidth;
}
c = c.nextSibling;
}
element.style.width = w + "px";
}
function do_add() {
var container = document.getElementById("container");
var t = document.getElementById("template").cloneNode(true); //clone the template
t.id = "item_" + next_id; //create a new unique id
t.className = "item";
next_id += 1;
container.appendChild(t);
maximize_width(container);
}
</script>
<style>
#template{
display:none;
}
#scroll-container {
width: 100%;
margin: 0px;
overflow-x: auto;
overflow-y: hidden;
}
#container{
}
.item{
display:inline-block;
margin: 0px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="container">
<form id="template" class="template">
</form>
</div>
</div>
<button onclick="do_add()">Add</button>
</body>
</html>
Doesn't this addition to your header suffice ?
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
(I haven't IE on my linux workstation but it is usually enough to make IE9 work as expected if the doctype is already correct)