gridstack / gridstack.js Goto Github PK

I'm having an issue with float mode. It seems that as soon as you click and hold a widget (without actually dragging anywhere), it picks a new location for the widget (as indicated by the placeholder dashed box), 1 or 2 spaces below.

Here is my configuration -
[{"x":0,"y":0,"width":12,"height":5},{"x":0,"y":5,"width":4,"height":2},{"x":4,"y":5,"width":4,"height":2},{"x":8,"y":5,"width":4,"height":2},{"x":0,"y":7,"width":2,"height":2},{"x":3,"y":7,"width":4,"height":2},{"x":7,"y":7,"width":4,"height":2},{"x":8,"y":9,"width":4,"height":2},{"x":0,"y":10,"width":4,"height":2},{"x":4,"y":10,"width":4,"height":2},{"x":9,"y":11,"width":3,"height":2},{"x":0,"y":12,"width":4,"height":2},{"x":4,"y":12,"width":4,"height":2}]

To test this, click and hold one of the widgets in the bottom row. You will see that it instantly incorrectly positions the place holder.

HI, when i re-sizing window, block's width are re-sizing perfectly but height. i want to re-size width and height equally.
Thank you.

It appears that the remove_widget method is missing a line at the top:
el = $(el);

Without this line you must pass in a jquery object so the code is actually doing a $($(el))
Like the method add_widget, this method should be expecting "el" to be a string selector.

When I disable dragging and resizing is it possible to make height automatically growing with content?
Than you :)

Looks like this is still happening in certain cases (related to #23). Using the below layout.

[{"widget_id":12,"x":0,"y":0,"width":12,"height":1,"locked":false},{"widget_id":2,"x":0,"y":1,"width":4,"height":3,"locked":false},{"widget_id":3,"x":4,"y":1,"width":8,"height":1,"locked":false},{"widget_id":6,"x":4,"y":2,"width":8,"height":1,"locked":false},{"widget_id":4,"x":4,"y":3,"width":8,"height":1,"locked":false},{"widget_id":7,"x":0,"y":4,"width":12,"height":1,"locked":false},{"widget_id":8,"x":0,"y":5,"width":12,"height":1,"locked":false},{"widget_id":9,"x":0,"y":6,"width":12,"height":1,"locked":false},{"widget_id":15,"x":0,"y":7,"width":12,"height":3,"locked":false}]

To get it happen move the square above the top line. Things are shifted and even if you drag the square back to its original position, the layout has changed.

Hi,

I think the work that was done for this project so far is amazing and it would be good to have a demo on how this library can be used using knockout. Also, with regards to bootstrap it would be nice to have some kind of more elaborate layout when the window width/height is changed.

What I mean by that is if you have 3 column widget layout on stretching the layout will change to 2 columns and 1 column at the end....this would be really cool...

This probably isn't the proper place to ask this, but how can I get the data on demand (coordinates, width, height, id)?

It seems like most people would eventually want to save their layout to a database or something else, but I am not finding any information on how to do this.

While adding a widget, the constraints of the grid (width and height) are not respected.

Hello Pavel,

I thank you for your efficient and simple grid on bootstrap.

Would it be possible to specifiy in your release what we must pick from Jquery UI ?
Cause it's 234Ko minified and inside we have accordion and other useless stuff i suppose. :)

When i try to remove a widget i have this error on my chrome debugger

_Uncaught TypeError: Cannot set property 'id' of undefined (gridstack.js:196)

The last 2 lines of the stack are as follow

GridStackEngine.remove_node (gridstack.js:196)
GridStack.remove_widget (gridstack.js:497)

My code that calls the method

myElement = $('#myWidgetDiv'+wc_id)[0].outerHTML;
myElement = $(myElement); // with this line or without same error with the method remove_widget
var grid = $('.grid-stack').data('gridstack');
grid.remove_widget(myElement);

The content of myElement

<div id="myWidgetDiv2" class="grid-stack-item ui-draggable ui-resizable" data-gs-x="7" data-gs-y="0" data-gs-width="5" data-gs-height="13"><div class="grid-stack-item-content"><div class="panel panel-default"><div class="panel-heading panel-move ui-draggable-handle"><span class="pull-right"><button type="button" class="btn btn-default btn-xs btn-remove-widget" title="Supprimer" value="2"><span class="glyphicon glyphicon-trash"></span></button></span>Mes derniers logs</div><table class="table table-condensed table-striped"><thead><tr><th>Objet</th><th>Action</th><th><span class="pull-right">Date</span></th></tr></thead><tbody><tr><td><a href="#" class="widget" title="Frais"><span class="fa fa-taxi"></span> Hotel Suisse</a></td><td><span class="label label-default">Création</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Frais"><span class="fa fa-taxi"></span> Taxi Poissy</a></td><td><span class="label label-default">Création</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Client"><span class="fa fa-briefcase"></span> Aldoluck AG</a></td><td><span class="label label-default">Modif.</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Ressource"><span class="fa fa-users"></span> Abdelkader Aoucif</a></td><td><span class="label label-default">Modif.</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Client"><span class="fa fa-briefcase"></span> Aldoluck AG</a></td><td><span class="label label-default">Modif.</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr></tbody></table></div></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div></div>

Please, help :)

I would like to group widgets to one panel, so I tried to insert a sub gridstack into a "grid-stack-item-content". But resizing or moving widgets leads to several effects...
The widgets of the nested gridstack will be moved to the root gridstack - I tried to fix this by changing the reassignment of widgets in the on_end_moving function (save the original parent of widget, detach and attach to original container instead of "self.container").
The result behaves better (the elements remain in their original container) - but it seems that positioning and sorting of the root-widgets does not only affect the root level widgets but includes nested widgets in some way. Just for fun I commented out the pack and fix-collisions routines - the result did not look so bad (I can move widgets around in the nested container and can move or resize the complete container without any problems - it seems to me that gridstack could basically support my requierement).
Do you know some way to handle multiple nested gridstack instances in one document?

I've discovered an issue with an overlapping widget. My configuration is

"[{"x":0,"y":0,"width":4,"height":3},{"x":4,"y":0,"width":2,"height":4},{"x":6,"y":0,"width":6,"height":5},{"x":0,"y":3,"width":4,"height":2},{"x":0,"y":5,"width":6,"height":3},{"x":6,"y":5,"width":6,"height":2},{"x":0,"y":8,"width":4,"height":6},{"x":4,"y":8,"width":8,"height":5},{"x":4,"y":13,"width":8,"height":2},{"x":0,"y":14,"width":4,"height":2},{"x":4,"y":15,"width":8,"height":3},{"x":0,"y":16,"width":4,"height":2},{"x":0,"y":18,"width":4,"height":2},{"x":4,"y":18,"width":8,"height":2},{"x":0,"y":20,"width":4,"height":1}]"

Essentially when you resize the top left most widget to be higher, the bottom left most widget gets pushed to the top and the two overlap. It seems like the bottom left most widget can not be pushed into another lower row, so it get's push to row 0. Going to look into this, but also wondering if you've seen it or have any suggestions.

It would be perfect if there would be an option where you could constrain the hole grid

Hey,

I cannot set position of previously saved items like described in issue #13
The size of the items are okay but not the position

Is it linked to the _styles attribute from the grid that is not been regenerated as at the time of saving.

I can give you my source files if you need to reproduce the issue ; or discuss about that

Regards,

Hi,
If i use function locked, i get stack-item and want lock it, but if i lock with true i can move with this item.

$(".grid-stack").on('dblclick', function (event, ui) {
var grid = $('.grid-stack').data('gridstack');
var el = event.target;
if (el != null) {
grid.locked(el, true);
}
});

@troolee In some cases you want to be able to define the padding on columns and rows. By default currently rows have a padding of 20px and columns have a padding of 10px on both left and right sides. These values should be options. This will allow users to have grid items touch if so desired.

Hey,

i found your tool yesterday and thought it would be awesome to implement it in one of my projects. Today you updated your project and now gridstack.js does not work. It throws the following error:

TypeError: Not enough arguments to CSSStyleSheet.insertRule.
self._styles.insertRule(css);

I looked up the error and you are missing an argument with an index. I took index from the for-loop where the method is called and magically it works again ;)

I hope you fix this error, because also the demo does not work at the moment either.

Thanks in advance :)

It appears that the remove_widget method is missing a line at the top:
el = $(el);

Without this line you must pass in a jquery object so the code is actually doing a $($(el))
Like the method add_widget, this method should be expecting "el" to be a string selector.

It would be useful to be able to listen to additional events - on start moving, on end moving, on start resize, on end resize. For example, may want to be add or remove classes during these events, possibly to supply visual aids to the user during a change. Just like you do with on_change
self.container.trigger('on_start_moving', [event, ui]); or something to that effect

Hello @troolee

In my project, I use a grid.remove_widget(el). However, after of use this method, and move the widget(drag drop), the grid shows the widget again.

What can be done?

Obs.: The span no has space

Att

please check this bug.

My code is:

var options = {
    cell_height: 80,
    vertical_margin: 10
};
$('.grid-stack').gridstack(options);

I don't see anything syntactically different with what I have versus the demo and everything else works great except I can't re-size anything with the drag handle, I can with the re-size function.

I tried putting breakpoints in the source on all the re-size functions there were and none of them fired, its almost like the event isn't being triggered.

Does anything come to mind?

@troolee Looks like the latest code has broken the "non-float" mode. Even when float is set to false, widgets are not pushed to the top, and behave like just as float mode does. I reverted to the previous gridstack.js to make sure it wasn't on my end. The old version works as expected.

Hi,

would you add a function to animate height / width? That would look nice...
something like: grid.resize-animate(child1, 4, 3);

Best Regards,
Peter

With a high data-gs-max-height (and large widgets on the page) it can make resizing and initial load less performant.

For all nodes, just draw the CSS classes +/- 10 cell_heights.
This loop causes the performance problems when max_height is something like 10,000 for example, that loop makes resizing extremely glitchy.

Hi,

i am trying to use ANIJS to animate add/remove of the widgets in the grid but for some reason this would not work. is there any event that gets triggered on add/remove?

the syntax is data-anijs="if: <event_name>, do: animated bounceIn"

thanks,
Nick

How to re-size block height when re-sizing window?

Hi, when I use grid.resize($('.grid-stack-item[data-gs-x="0"]'), 3, 4); it gives me errors

Thanks in advance!

Hi ,
Again me ,could you please make method that will build a new grid from previously stored positions , like gridster: http://gridster.net/demos/grid-from-serialize.html
Thank you

...to use actual bootstrap classes col-md-x etc instead of data-gs-width

I don't know if this is a bug or a feature, but inability to resize/move widgets in responsive mode is quite frustrating.

Also, how can I target the element that was repositioned/resized, I could parse items, but need to target only the element which was modified.

@troolee If you call add_widget with an auto_position parameter of false, it actually uses the auto_position mode.
Looks like its setting el.attr('data-gs-auto-position', auto_position) and when it reads it back it sets the node.auto_position = "false" as a string.
Later, this get's evaluated to true when it does the check
if (node.auto_position == true){}
if ("false" == true) which ends up going into the block.

Hi @troolee,

I am trying to use the gridstack width, changing for 3. Although, this change to 3 columns and the width of external div('.grid-stack') are correct, the width value of "item" stayed in 8,3% and not in 33%.

Is getting so:

https://cloud.githubusercontent.com/assets/3621189/5599368/3ddd6898-92ac-11e4-8a2c-acd65f9f1e32.png

When it should stay that way:

https://cloud.githubusercontent.com/assets/3621189/5599367/3dd99434-92ac-11e4-9cbd-80cc718b62e2.png

The code are:

// Begin For

grid.add_widget("<div class='grid-stack-item' data-gs-no-resize='true'><div class='grid-stack-item-content'><div class='grid-heading'><small>Label</small></div><div class='grid-body'><div class='text-center'> </div></div></div></div>', 0, 0, 4, 2, true);

//End For

Att
Mateus Giuliano

First off, loving Gridstack. It's working for me much better than gridster because of it's compatability with bootstrap. Looks like your demo site and the latest version are out of sync. I'm seeing some issues with the opacity and dashed line on drag. Looks like .grid-stack-item-content got renamed to .box?

Also, I'm considering modifying the js to use actual bootstrap classes col-md-x etc instead of data-gs-width. I was thinking for any cases where bootstrap is not included, a separate css file can be loaded which sets up percentage values for those. What are your thoughts on this?

When an item is made "non-movable" & "non-resizable", it should be fixed in place. It seems however that dragging other widgets near it can push the non-movable item out of it's current position. The position of non-movable item should not be considered as a possible new location for the item being dragged.

This line here:
https://github.com/troolee/gridstack.js/blob/master/src/gridstack.js#L675

After calling resize() on an element which has a text field which the user is typing into, detaching and appending again causes the user to lose focus.

Why is detach() called and is there any other way this can be done? Specifically, I am using a rich text editor inside the node and detaching and appending again breaks the editor.

Commenting these lines out fixes my problem, but I'm not sure what problems it will cause.

I'm noticing in "float" mode, dragging widgets around the page can cause elements to shift even if the dragged widget is returned to its original position. I think widget positions need to be calculated based on the original layout at time the drag is started, rather than the current visible layout.

I'll try to describe an example. Say you have three widgets in a row. A B C. If I drag C over to where A is, A and B get pushed down to a second row. In the same drag (without letting go), I return C to its original position, A and B stay in their new positions on a second row. (Note: Happens easier if you drag C slowly back to its original position). This also happens if you cause reposition via resizing.

I think I've seen this bug occur in non-float mode as well, but it definitely occurs more regularly in float mode because of the nature of float mode.

It would be nice to be able to drag elements into empty areas. Right now nodes are placed as high in the grid as possible.

Found a good example of this one here - http://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/main
Click "enabled draggability" and "enable floating" . You can now drag elements in any empty area and they aren't pushed to the top most available spot.

It would be awesome to have touch support in this library.

Hi,

is it possible to show more than one Resize Handle? I would also like to have a handle on the bottom-left side, so that the User can decide where he wants to resize his widget.

Thanks

PS: I think i wrote this into the wrong section. Sorry :/

Hello, please could you tell me is it possible to disable drag&resize , and if it is, explain me how? Thank you.
RE: node.el.resizable('enable') & node.el.draggable('disable');

Would be nice if (like other options), max height could be set to 0 for infinity (and should likely be the default instead of 100.

Doing #41 would make this possible performance wise.

The <script> tags at the bottom of the page use http, causing the page to load improperly over https. If the user is running an extension like "HTTPS Everywhere", the demo will fail to load. Please use // instead of http://.

Hi,

is there a way to integrate this with Require.js and load it as an AMD module?

Thanks,
Nick

Seems as though the remove_all node methods also removes the place holder and it is never added back. If i remove_all and then add a new set of widgets, the place holder is gone. Is this a bug or how is remove_all supposed to be used?