2

Well I was using Gridster.js to make a dashboard like environment and thus wrote this following code. The Problem is that all the elements stack vertically when actually I want them to be initialised according to their row and col numbers specified in their html tag attributes 'data-row' and 'data-col'.

I checked the Console there are no Js Errors. After the page is loaded and the elements are stacked vertically I can still drag them and they can then be formed into a grid by dragging one after other.

Please can anyone tell me what I am doing wrong to not getting the elements stacked properly in grid like format when page loads.

Here is the Image of the output: As you can see the Elements are vertically stacked on top of one another

Here is the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gridster Test page</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="../Third Party Libraries/Gridster/Gridster.min.css"></link>
    <script src="../Third Party Libraries/Gridster/Gridster.min.js"></script>
    <script>
            var gridster;
            $(function () {
                gridster = $(".gridster > ul").gridster({

                    widget_margins: [10, 10],
                    widget_base_dimensions: [140, 140],
                    min_cols: 6,
                    min_rows: 5,
                    resize: {
                        enabled: true
                    }
                }).data('gridster');
            })
</script>
<style>
    ul, ol {
        list-style: none;
    }

    h1 {
        margin-bottom: 12px;
        text-align: center;
        font-size: 30px;
        font-weight: 400;
    }

    h3 {
        font-size: 25px;
        font-weight: 600;
        color: white;
    }

    /* Gridster styles */
    .demo {
        margin: 3em 0;
        padding: 7.5em 0 5.5em;
        background: #004756;
    }

        .demo:hover .gridster {
            opacity: 1;
        }

    .gridster {
        width: 940px;
        margin: 0 auto;
        opacity: .8;
        -webkit-transition: opacity .6s;
        -moz-transition: opacity .6s;
        -o-transition: opacity .6s;
        -ms-transition: opacity .6s;
        transition: opacity .6s;
    }

        .gridster .gs_b {
            background: blue;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .gridster .gs_y {
            background: yellow;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .gridster .gs_g {
            background: green;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        .gridster .gs_o {
            background: orange;
            cursor: pointer;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
</style>
<div class="gridster ready">
    <ul style="height: 640px; width: 960px; position: relative;">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="gs_b">a</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1" class="gs_b">b</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_b">b</li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="gs_g">c</li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2" class="gs_g">d</li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_y">e</li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1" class="gs_y">f</li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="gs_y">g</li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs_o">h</li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1" class="gs_o">i</li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_g">k</li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_b">j</li>
    </ul>
</div>

1 Answer 1

0

Try to delete the "ready" part from the class

<div class="gridster">

I am pretty sure this is done already by the plugin.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.