Search code examples
javascriptgridster

UL tag inside gridster widget

I'm trying to use ul tag inside gridster widget but for some reason list is not working correctly.

Please see fiddle below

http://jsfiddle.net/h9f63/237/

Solution

  • This is because you've enabled gridster inside of gridster.

    On line 5 of your JavaScript, you select all ul tags inside your gridster and turn them into sub-gridsters. You can change that to only select the outer ul element by using a greater-than sign, like this:

        gridster = $(".gridster > ul").gridster({  //...

    The addition of this > sign makes the selector target only the one ul that is the direct descendant of .gridster, not all the uls contained within.

    Likewise, your CSS needs the same fix:

    .gridster > ul {
    list-style: none;
    background-color: gray;
}
.gridster > ul li {
    background-color: white;
}

    Try it with those changes, it should work much better.