Search code examples
javascripthtmlcssinternet-explorer-9dhtml

How to make a scrolling row of Divs using CSS & Javascript?

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>
Solution

  • 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)