Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Set StaticGrid behaviour 0.3 #743

Closed
kool-kat opened this issue Aug 21, 2017 · 9 comments
Closed

Set StaticGrid behaviour 0.3 #743

kool-kat opened this issue Aug 21, 2017 · 9 comments
Labels
type:bug
Milestone
v1.0.0

Comments

@kool-kat
Copy link

kool-kat commented Aug 21, 2017 •
edited
Loading

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);
    });
});
@luckylooke
Copy link
Contributor

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
Copy link
Contributor

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

@kamran924
Copy link

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

@kool-kat
Copy link
Author

kool-kat commented Aug 25, 2017 •
edited
Loading

@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".

@radiolips
Copy link
Member

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 radiolips added this to the v1.0.0 milestone Sep 5, 2017
@radiolips radiolips mentioned this issue Sep 6, 2017
Merged
@radiolips
Copy link
Member

@kool-kat Fixed in dev branch now.

@luissmg
Copy link

luissmg commented Mar 19, 2018

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

@radiolips
Copy link
Member

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.

@luissmg
Copy link

luissmg commented Mar 19, 2018 •
edited
Loading

@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.

@ghost ghost mentioned this issue Feb 18, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type:bug
Projects
None yet
Milestone
v1.0.0
Development

No branches or pull requests
5 participants
@luckylooke @radiolips @kamran924 @luissmg @kool-kat