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


Tags: javascript,html,css,internet-explorer-9,dhtml

Problem :

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)


    CSS Howto..

    How to create straight corners with CSS border-radius? [duplicate]

    How to display last div at top using CSS?

    CSS: How to select first element in each row?

    How can i make this css star smaller?

    .NET - How to build themes for big CSS files

    How to vertically align a DIV next to an image?

    how to create an alphabet letter selector that spans an entire div width

    How to create hidden pop out side menu

    Avoid the height change of a container + how to position a list item at end

    How to build this layout with CSS?

    CSS: how to vertically and horizontally align an image?

    Show all text document

    How do I get Internet Explorer to do a better job displaying images

    How to hide first level span element by CSS “>” selector

    How to create a medal in css [closed]

    How to place sticky footer div's next to each other when bottom:0 is set dynamically

    How to keep text in the middle of the screen even when re-sizing page in html/css

    How to select lowest level ul in nested ul in Javascript/ css

    How to make child span collapse with parent

    CSS: How to define spacing between responsive columns

    Rails 4 -how to write a view that displays instances in alternating format

    How to do letter spacing every two letters with CSS only?

    How to represent x and y in svg symbol

    How to make background color extend all the way to bottom of page / content?

    How to have different size images fluidly respond CSS?

    How to indent items of a sublist using css and html in wordpress

    CSS question: how to remove the border from an image in WordPress

    How would YOU do this: Tables or CSS? [closed]

    How can I vertically align the text in an anchor tag?

    How to style text in JQuery?