Nested gridster

Question

When I nest two Gridsters (http://gridster.net/), and when I try to drag around the elements inside the inner gridster, the placeholder's size is proportional to the size of the external gridster, how do I fix this?

http://jsfiddle.net/YS4Ce/

The HTML:

<div id="demo-1" class="gridster">
        <ul id="grid1">
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0
                <div id="demo-2" class="">
                    <ul id="grid2">
                        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2" class="items2">0</li>
                        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2" class="items2">1</li>
                        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="items2">2</li>
                        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1" class="items2">3</li>
                        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1" class="items2">4</li>
                        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="items2">5</li>
                        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1" class="items2">6</li>
                        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1" class="items2">7</li>
                        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1" class="items2">8</li>
                    </ul>
                </div>
            </li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
            <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
            <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
            <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
            <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
        </ul>
    </div>

Javascript:

    var gridster0 = null;
    var gridster1 = null;

    $(function() {

        gridster0 = $("#demo-1 > ul#grid1").gridster({
            namespace: '#demo-1',
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5]
        }).data('gridster');

        gridster1 = $("#demo-2 > ul#grid2").gridster({
            namespace: '#demo-2',
            widget_base_dimensions: [20, 10],
            widget_margins: [2, 2],
            draggable: {
                items: ".items2"
            }
        }).data('gridster');


    });

Answer 1

Figured out, the problem is with the way CSS rules get generated based on the namespace option.

So in the above example namespace: '#demo-1', results in CSS classes like

#demo-1 [data-sizex="2"] {width: 210px;}

And similarly namespace: '#demo-2' results in

#demo-2 [data-sizex="2"] {width: 44px;}

For ul#grid2 li, both the above CSS rules have equal preference, and hence the preference of the rule being applied is dependent on the order in which the rules appear. In this example we are initializing grid1 before grid2 hence the CSS rules for grid1 get generated first, followed by grid2.

So when grid2 is getting initialized, the coords object gets created first at which point the width and height of grid1 get used.

The Solution: Change namespace: '#demo-2' to namespace: '#demo-1 #demo-2' and initialize it before grid1, also set widget_selector options correctly,

        gridster1 = $("#demo-2 > ul#grid2").gridster({
            namespace: '#demo-1 #demo-2',
            widget_base_dimensions: [20, 10],
            widget_margins: [2, 2],
            widget_selector: ".items2",
            draggable: {
                items: ".items2"
            }
        }).data('gridster');

        gridster0 = $("#demo-1 > ul#grid1").gridster({
            namespace: '#demo-1',
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5],
            widget_selector: ".items1"
        }).data('gridster');