Gridstack.js: Set StaticGrid behaviour 0.3

Created on 21 Aug 2017 · 9Comments · Source: gridstack/gridstack.js

Hi,

I have done a trawl through issues past and present and see a few tickets referring to StaticGrid option not behaving as expected.

I have created a 2 piece grid and initialised it as staticGrid=true

I know it is seeing this parameter as it is applying the CSS class grid-stack-static to the wrapper grid DIV.

BUT each piece in the grid is still moving and resizing. I know I can manually assign a no-move and no-resize data class but this defeats the purpose of the staticGrid flag.

Am I missing something? I am not programatically adding pieces, these were given a size and position at startup in HTML code; so I expected the static lock to work.

HTML

<!--WRAPPER--><div class="myGrid">
<div class="grid-stack"><!--START GRID--><div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="6" data-gs-height="2"><div class="grid-stack-item-content clr1">Griditem1</div></div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="2"><div class="grid-stack-item-content clr2">Grid item2</div></div><!-- END GRID --></div>
<!--end wrapper--></div>

INIT

$(document).ready(function () {
  // start grid

   $(function () {
       var options = {
            verticalMargin: 3,
            staticGrid:true,
            cellHeight:'3.5em'
         };
        $('.grid-stack').gridstack(options);
    });
});

bug

Source

kool-kat

👍1

Most helpful comment

@kool-kat Fixed in dev branch now.

radiolips on 6 Sep 2017

👍3

All 9 comments

I can confirm that option staticGrid does not take any effect. Tested on very basic example:

<!DOCTYPE html>
<html>
<head>
    <title>Test gridstack</title>
    <link rel="stylesheet" href="gridstack.css" />
    <script src="lodash.js"></script>
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="jquery.ui.touch-punch.js"></script>
    <script src="gridstack.js"></script>
    <script src="gridstack.jQueryUI.js"></script>
</head>
<body>

    <div class="grid-stack" style="border: 1px solid green">
        <div class="grid-stack-item"
            data-gs-x="0" data-gs-y="0"
            data-gs-width="4" data-gs-height="2">
                <div class="grid-stack-item-content" style="background: red">A</div>
        </div>
        <div class="grid-stack-item"
            data-gs-x="4" data-gs-y="0"
            data-gs-width="4" data-gs-height="4">
                <div class="grid-stack-item-content" style="background: blue">B</div>
        </div>
    </div>

    <script type="text/javascript">
    $(function () {
        $('.grid-stack').gridstack({
            staticGrid: true,
        });
    });
    </script>

</body>
</html>

luckylooke on 22 Aug 2017

Workaround for now is to call setStatic method right after init.

 let gridstack = $('.grid-stack').gridstack({
                staticGrid: true, // does not work
            }).data('gridstack')
    gridstack.setStatic( true ) // workaround for bug in staticGrid option

luckylooke on 22 Aug 2017

👍1

This will not work if you have nested grids. Inner grids are not static.

kamran924 on 23 Aug 2017

@kamran924

The work around will also work on inner grids. Remember to call the setStatic(true); function for each grid group.

  $('.grid-stack').data('gridstack').setStatic( true );
  $('.grid-inner').data('gridstack').setStatic( true );

The first one sets the main grid. The second one locks the inner grid which is identified within the HTML code with class name "grid-inner".

kool-kat on 25 Aug 2017

Holy smokes. I don't know at what point that broke, but it's definitely broken. Thanks for letting us know, @kool-kat . I'm glad there's a workaround, but this issue needs to be fixed. It'll be resolved in the dev branch shortly and will be part of the next release.

radiolips on 5 Sep 2017

@kool-kat Fixed in dev branch now.

radiolips on 6 Sep 2017

👍3

@radiolips is this fixed on production? Cause I have the most recent version and it still does not work.

luissmg on 19 Mar 2018

Hey, @luissmg . The release branch has yet to be updated, despite how long ago this was fixed. So, no, it's not yet fixed in production, but you can use the develop branch to remedy the problem for now.

radiolips on 19 Mar 2018

@radiolips Thanks for the response. I will keep an eye on the production branch and test the dev to see if it is ok. Do you have a release scheduled?

EDIT: So, I tested the dev version and it does work.

luissmg on 19 Mar 2018

Was this page helpful?

0 / 5 - 0 ratings